/* 使用者端強調色：統一由此變數控制 (選取外框、進度條、中獎數字、加值金額等) */
:root {
    --x50-accent: #F4106B;
    --x50-accent-strong: #d10a5a;
    --x50-accent-on: #fff;
}
/* 深色模式：輔助色改用 Tocas 標準黃 (淺色維持原樣) */
@media (prefers-color-scheme: dark) {
    html:not(.is-light) {
        --x50-accent: var(--ts-warning-500);
        --x50-accent-strong: var(--ts-warning-400);
        --x50-accent-on: #1b1b1d;
    }
}
html.is-dark {
    --x50-accent: var(--ts-warning-500);
    --x50-accent-strong: var(--ts-warning-400);
    --x50-accent-on: #1b1b1d;
}

*{
	box-sizing: border-box;
}

html, body {
	-webkit-text-size-adjust: none;
    touch-action: manipulation;
}

.modalglass{
    backdrop-filter: saturate(var(--saturation))!important;
    -webkit-backdrop-filter: saturate(var(--saturation))!important;
    padding: 14px 18px 18px 18px;
    margin: auto 0px 0px 0px;
    width: 100%;
    border-radius: 2.5rem;
}

.glassclose{
    color: var(--ts-gray-700);
    border-radius:99rem!important;
    width:36px;
    height:36px;
    font-size:20px;
}
.glassclose:before{
    top:1px;
}

.ts-icon::before {
    vertical-align: middle;
}

.ts-app-navbar .is-active .label {
    color: #ce0052;
    text-shadow: 0 0 1px #ffffff61, 0 0 3px #ffffff42, 0 0 5px #ffffff1c;
}
.ts-app-navbar .is-active .ts-icon {
    color: #F4106B;
    text-shadow: 0 0 1px #ffffff6e, 0 0 3px #ffffff4d, 0 0 5px #ffffff65;
}

.ts-app-navbar .is-active::after {
    border-radius: 3rem !important;
}

.ts-app-navbar .item {
    gap: 2px;
    height:100%;
    padding: 0px 16px 0px 16px;
    text-shadow: 0 0 .8px var(--gamesel-bg), 0 0 10px var(--gamesel-bg), 0 0 21px var(--gamesel-bg);
}

.ts-app-navbar .item .label {
    font-size:9.5px;
}

.ts-app-navbar .item .ts-icon {
    font-size:19px;
}
/* 底部選單 (直式手機) 只顯示圖示，高度不變；側列版面另外維持 19px */
#globalmenu .item .label {
    display: none;
}
#globalmenu .item .ts-icon {
    font-size: 22px;
}

.grow-svg-icon{
    color:rgba(255,255,255,0.95);
    filter : brightness(0) invert(1) drop-shadow(0 0 3px rgba(0, 0, 0,0.7));
}

.grow-icon{
    filter : brightness(0) invert(1) drop-shadow(0 0 3px rgba(0, 0, 0,0.7));
    height: 3.8rem;
}

.grow-icon img{
    height: 3.8rem;
    width: auto;
}

.grow-text{
    font-width: 800;
    color:white; 
    filter: brightness(0) invert(1) drop-shadow(0 0 2.5px rgb(0, 0, 0));
}

.grow-text.description{
    font-width: 400;
    color:rgba(255,255,255,0.9);
}


.ts-tab.glass {
    border-radius: 3rem;
    border: 0px;
}
.ts-tab.glass .item {
    font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}
.ts-tab.glass::after {
    border-radius: 3rem;
}

#globalmenu .item {
    color: var(--ts-gray-900);
}
.is-noborder {
    border:0px !important;
}
.material {
    background: var(--ts-gray-200)!important;
}
.cell {
font-size:14px;
}

.is-billboard {
font-size:13px;
padding-bottom:5px;
}

.is-info {
padding-left:1px;
}

.is-margin {
margin:12px;
d}
.is-rotate:before{
transform: rotate(90deg);
}
.ts-select:after {
    position: absolute !important;
    content: "\f078" !important;
    top:0!important;
    right:9px!important;
    justify-content: right;
    padding-right:8px;
    font-size:10px;
}
.ts-select.glass .content, .ts-select select {
        border-radius: 3rem;
}
.ts-blankslate.is-small{
    padding-bottom:14px;
}
.shopsel .ts-blankslate{
    padding-top:38px;
}
.shopsel{
	height: 237px;
    width:100%;
    border-radius:0px !important;
    background-size:cover;
    padding:24px 12px 18px 12px;
    background-position-y:center;

}

.regionsel{
	height: 197px;
    width:100%;
    border-radius:0px !important;
    background-size:cover;
    padding:24px 12px 18px 12px;
    background-position-y:center;

}

.regionsel .ts-blankslate{
    padding-top:38px;
}

.favsel{
    width:100%;
    border-radius:0px;
    padding:14px 12px;
}

.basicglass.imgdiv:before{
    content: '';
    display: block;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 5;
  box-shadow:inset 0 0 0 1px 
     color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent), inset 0.8px 2.5px 0px -2px 
     color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent), inset -2.9px -0.5px 0px -2.4px 
     color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent), inset -4px -5.9px 1px -6px 
     color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 70%), transparent), inset -0.3px -1px 2px 0px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent), inset -1.5px 2.5px 0px -3px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 14%), transparent), inset 0px 0px 4px -2px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 14%), transparent), inset 4px -3px 1px -4px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 6%), transparent), 0px 1px 5px 0px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 6%), transparent), 0px 6px 16px 0px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 6%), transparent);
}



.gamesel{
	height: auto;
    width:100%;
    margin:12px 0px;
}
   
.half-gamesel{
    margin:4px 0px !important;
    width: 49% !important;
}
.gamesel>.ts-image{
    border-radius: 1.1rem;
	overflow: hidden;
	height: 135px;
        width:100%;
}
.gamesel>.ts-image>img{
    border-radius: 1.1rem;
	margin-top: -25%;
	opacity: 0.85;
        width:100%;
}
.half-gamesel>.ts-image>img{
    border-radius: 1.1rem;
    width:124%;
    left:-12%;
	margin-top: -10% !important;
}
.half-gamesel>.ts-mask>.ts-content>.ts-header{
font-size: var(--ts-font-size-15px);
}
.gamesel>.ts-mask>.ts-content{
padding:12px;
padding-bottom:6px;
}
.gamesel>.ts-mask{
    background: linear-gradient(12deg,rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%) !important; 
	font-size:26px;
    padding-top:50px!important;
    z-index:2;
}
.gamehover:hover {
    transform: translateY(-2px);
}

.s-hover:hover {
    transform: scale(1);
}
.s-hover:active {
    transform: scale(1.01);
}

.hover:hover {
    transform: scale(1);
}
.hover:active {
    transform: scale(1.05);
}
.hover:focus {
  outline: none;
}
.is-margin-icon{
	margin-right: 8px;
}
.is-tiny-icon{
	font-size: 6px;
}
.gamebase {
}
.is-gameinfo {
font-size:12px!important;
}
.is-paddr-5px {
padding-right:5px;
}
.ms.center.aligned.header {
    font-size:2.4rem;
    line-height: 1.2;
    margin-top:5px;
}
.ms.center.aligned.note.description {
    font-size:12px!important;
    transform: scale(0.90);
    margin:0px;
    color:gray;
}
.ms.center.aligned.notesub.description {
    font-size:12px!important;
    margin:0px;
    margin-bottom: 5px;
}
.is-margin-divider{
margin: 12px 0px;
}
.is-ug{
margin:12px;

}
#main{
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
    border-radius:0px;
}

.is-nobrd{
margin-left:10px;
margin-right:10px;
}

.is-usermenu{
margin-top:20px;
}
.coin-actions {
    text-align: right;
    padding: 1rem 1.5rem;
}

.is-pay{
    padding: 8px 15px 8px 15px !important;
    line-height:1;
 font-size:14px !important;
}

.is-pay-p{
margin-bottom:8px;
}

.ts-app-layout .cell  {
    background:rgba(255,255,255,0)!important;
}


.button-eft {
  transition: background-color 300ms cubic-bezier(1, 0, 0.4, 1),
  box-shadow 300ms cubic-bezier(1, 0, 0.4, 1),
  backdrop-filter 300ms cubic-bezier(1, 0, 0.4, 1),
  -webkit-backdrop-filter 300ms cubic-bezier(1, 0, 0.4, 1),
  translate 300ms cubic-bezier(1, 0, 0.4, 1);
  animation: scaleToggle 440ms ease;
}

@keyframes scaleToggle {
  0% {
    scale: 1 1;
  }
  50% {
    scale: 1.04 1.08;
  }
  100% {
    scale: 1 1;
  }
}


.globalmenu {
    display:grid;
    height:56px;
    padding:4px 4px 3px 4px!important;
    border-radius:5rem!important;
}
.globalmenu::after {
    border-radius:5rem!important;
}


@media (prefers-color-scheme: dark) {
    :where(html:not(.is-light)) body {
          --c-glass: #bbbbbc;
          --c-light: #fff;
          --c-dark: #000;
          --c-action: #03d5ff;
          --c-bg: #1b1b1d;
          --glass-reflex-dark: 2;
          --glass-reflex-light: 0.3;
          --saturation: 190%;
          --gamesel-bg: rgba(0,0,0,0.4);
          --shopsel-bg: rgba(0,0,0,0.4);
          --bgc-bg: rgba(255,255,255,0.25);
    }
    :where(html:not(.is-light)) .stamp-border {
        border-left: 1.2px solid rgba(255, 255, 255, 0.2);
    }
    :where(html:not(.is-light)) .stamp-divider {
        border-top: 1.2px solid rgba(255, 255, 255, 0.2);
    }
    :where(html:not(.is-light)) .blurico {
        filter:drop-shadow(0 0 2px rgba(0, 0, 0,0.55));
    }
    :where(html:not(.is-light)) .ts-modal {
        padding: 8px 8px;
        backdrop-filter: blur(6px) saturate(1.2)!important ;
        -webkit-backdrop-filter: blur(6px) saturate(1.2)!important ;
        background: rgba(0, 0, 0, 0.50) !important;
    }
    :where(html:not(.is-light)) .bg-text {
        color:white; 
        filter: brightness(0) invert(1) drop-shadow(0 0 2.5px rgb(0, 0, 0));
    }
}
/* 使用者在「外觀」選了暗色：不論系統設定都套用 */
:where(html.is-dark) body {
          --c-glass: #bbbbbc;
          --c-light: #fff;
          --c-dark: #000;
          --c-action: #03d5ff;
          --c-bg: #1b1b1d;
          --glass-reflex-dark: 2;
          --glass-reflex-light: 0.3;
          --saturation: 190%;
          --gamesel-bg: rgba(0,0,0,0.4);
          --shopsel-bg: rgba(0,0,0,0.4);
          --bgc-bg: rgba(255,255,255,0.25);
    }
:where(html.is-dark) .stamp-border {
        border-left: 1.2px solid rgba(255, 255, 255, 0.2);
    }
:where(html.is-dark) .stamp-divider {
        border-top: 1.2px solid rgba(255, 255, 255, 0.2);
    }
:where(html.is-dark) .blurico {
        filter:drop-shadow(0 0 2px rgba(0, 0, 0,0.55));
    }
:where(html.is-dark) .ts-modal {
        padding: 8px 8px;
        backdrop-filter: blur(6px) saturate(1.2)!important ;
        -webkit-backdrop-filter: blur(6px) saturate(1.2)!important ;
        background: rgba(0, 0, 0, 0.50) !important;
    }
:where(html.is-dark) .bg-text {
        color:white; 
        filter: brightness(0) invert(1) drop-shadow(0 0 2.5px rgb(0, 0, 0));
    }

@media (prefers-color-scheme: light) {
    :where(html:not(.is-dark)) body {
          --c-glass: #bbbbbc;
          --c-light: #fff;
          --c-dark: #000;
          --c-action: #0052f5;
          --c-bg: #e8e8e9;
          --glass-reflex-dark: 1;
          --glass-reflex-light: 1;
          --saturation: 250%;
          --gamesel-bg: rgba(255,255,255,0.35);
          --shopsel-bg: rgba(255,255,255,0.55);
          --bgc-bg: rgba(0,0,0,0.25);
    }
    :where(html:not(.is-dark)) .stamp-border {
        border-left: 1px solid rgba(255, 255, 255, 0.6);
    }
    :where(html:not(.is-dark)) .stamp-divider {
        border-top: 1px solid rgba(255, 255, 255, 0.6);
    }
    :where(html:not(.is-dark)) .blurico {
        filter:drop-shadow(0 0 3px rgba(255, 255, 255,0.65));
    }
    :where(html:not(.is-dark)) .ts-modal {
        padding: 8px 8px;
        backdrop-filter: blur(6px) saturate(1.2)!important ;
        -webkit-backdrop-filter: blur(6px) saturate(1.2)!important ;
        background: rgba(255, 255, 255, 0.2) !important;
    }
    :where(html:not(.is-dark)) .bg-text {
        color:#303030;
        font-weight:400;
        filter: drop-shadow(0 0 3px rgb(255, 255, 255));
    }
}
/* 使用者在「外觀」選了亮色：不論系統設定都套用 */
:where(html.is-light) body {
          --c-glass: #bbbbbc;
          --c-light: #fff;
          --c-dark: #000;
          --c-action: #0052f5;
          --c-bg: #e8e8e9;
          --glass-reflex-dark: 1;
          --glass-reflex-light: 1;
          --saturation: 250%;
          --gamesel-bg: rgba(255,255,255,0.35);
          --shopsel-bg: rgba(255,255,255,0.55);
          --bgc-bg: rgba(0,0,0,0.25);
    }
:where(html.is-light) .stamp-border {
        border-left: 1px solid rgba(255, 255, 255, 0.6);
    }
:where(html.is-light) .stamp-divider {
        border-top: 1px solid rgba(255, 255, 255, 0.6);
    }
:where(html.is-light) .blurico {
        filter:drop-shadow(0 0 3px rgba(255, 255, 255,0.65));
    }
/* 亮色：集點卡印章在白色光暈外再加淡淡深色陰影 (只限印章，其他 .blurico 圖示不變) */
@media (prefers-color-scheme: light) {
    :where(html:not(.is-dark)) #stampv .blurico { filter:drop-shadow(0 0 3px rgba(255, 255, 255,0.65)) drop-shadow(0 1px 2px rgba(0, 0, 0,0.22)); }
}
:where(html.is-light) #stampv .blurico { filter:drop-shadow(0 0 3px rgba(255, 255, 255,0.65)) drop-shadow(0 1px 2px rgba(0, 0, 0,0.22)); }
:where(html.is-light) .ts-modal {
        padding: 8px 8px;
        backdrop-filter: blur(6px) saturate(1.2)!important ;
        -webkit-backdrop-filter: blur(6px) saturate(1.2)!important ;
        background: rgba(255, 255, 255, 0.2) !important;
    }
:where(html.is-light) .bg-text {
        color:#303030;
        font-weight:400;
        filter: drop-shadow(0 0 3px rgb(255, 255, 255));
    }

.bg-text-white{
    color:white !important;
    filter: drop-shadow(0 0 2.5px rgba(0, 0, 0));
}
.bg-text-dark{
    color:#303030;
    filter: drop-shadow(0 0 3px rgb(255, 255, 255));
}
.bg-text-white-link{
color:#95ccff!important;
}
.bg-text-dark-link{
color:#0050b3!important;
}

.basicglassbtn {
  position: relative;
  background-color: color-mix(in srgb, var(--c-glass) 10%, transparent) !important;
  backdrop-filter: blur(2.5px) saturate(var(--saturation));
  -webkit-backdrop-filter: blur(2.5px) saturate(var(--saturation));
  border:none;
  border-radius: 1.5rem;
  box-shadow:inset 0 0 0 1px 
     color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent), inset 0.8px 2.5px 0px -2px 
     color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent), inset -2.9px -0.5px 0px -2.4px 
     color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent), inset -4px -6.6px 3px -6px 
     color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 40%), transparent), inset -0.3px -1px 2px 0px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent), inset -1.5px 2.5px 0px -3px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent), inset 0px 3px 4px -2px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent), inset 4px -3px 1px -4px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 4%), transparent), 0px 1px 5px 0px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 4%), transparent), 0px 6px 16px 0px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 3%), transparent);
}

.glass {
  position: relative;
  background-color: color-mix(in srgb, var(--c-glass) 15%, transparent) !important;
  backdrop-filter: blur(2.5px) saturate(var(--saturation));
  -webkit-backdrop-filter: blur(2.5px) saturate(var(--saturation));
  border:none;
  border-radius: 1.1rem;
  box-shadow:inset 0 0 0 1px 
     color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent), inset 0.8px 2.5px 0px -2px 
     color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent), inset -2.9px -0.5px 0px -2.4px 
     color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent), inset -4px -6.6px 3px -6px 
     color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent), inset -0.3px -1px 2px 0px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent), inset -1.5px 2.5px 0px -3px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 0px 3px 4px -2px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 4px -3px 1px -4px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 1px 5px 0px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 6px 16px 0px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
}

.basicglass{
    position: relative;
    background-color: color-mix(in srgb, var(--c-glass) 5%, transparent) !important;
    border:none;
  box-shadow:inset 0 0 0 1px 
     color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent), inset 0.8px 2.5px 0px -2px 
     color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 70%), transparent), inset -2.9px -0.5px 0px -2.4px 
     color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent), inset -4.5px -6.6px 3px -6px 
     color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 30%), transparent), inset -0.3px -1px 2px 0px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 2%), transparent), inset -1.5px 2.5px 0px -3px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), inset 0px 2.5px 2px -2px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent), inset 4px -3px 1px -4px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 5%), transparent), 0px 1px 5px 0px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 5%), transparent), 0px 6px 16px 0px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 4%), transparent);
}
.ts-button.glass{
    color: var(--ts-gray-900);
    text-shadow: 0 0 1px var(--c-bg), 0 0 10px var(--c-bg), 0 0 21px var(--shopsel-bg) !important;
}
.ts-chip.glass.is-circular::after {
    border-radius:3rem!important;
}
.ts-chip.glass{
    padding: 3px 12px;
    background: color-mix(in srgb, var(--c-glass) 30%, transparent);
    backdrop-filter: blur(3.5px) saturate(var(--saturation));
    -webkit-backdrop-filter: blur(3.5px) saturate(var(--saturation));
    text-shadow: 0 0 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.5), 0 0 21px rgba(0,0,0,0.3);
    color:rgba(255,255,255,0.9);
    font-weight: 500;
    font-size: 0.85rem;
}
.shopsel .ts-button.glass {
    color:rgba(255,255,255,0.8);
    font-weight: 500;
    font-size: 0.85rem;
    text-shadow: 0 0 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.5), 0 0 21px rgba(0,0,0,0.3) !important;
}

.ts-selection.glass input:.text {
    text-shadow: 0 0 1px var(--shopsel-bg), 0 0 10px var(--shopsel-bg), 0 0 21px var(--shopsel-bg);
}
.ts-selection.glass input:checked+.text::after {
    border-radius: 3rem !important;
}

.ts-selection.glass {
    border-radius: 3rem;
}

.ts-selection.glass::after {
    border-radius: 3rem;
}

.ts-selection.glass .item .text {
    color:rgba(255,255,255,0.9);
    font-weight: 500;
    font-size: 0.85rem;
}

.ts-selection.glass input:checked+.text {
  transition: background-color 300ms cubic-bezier(1, 0, 0.4, 1),
  box-shadow 300ms cubic-bezier(1, 0, 0.4, 1),
  translate 300ms cubic-bezier(1, 0, 0.4, 1);
  animation: scaleToggle 440ms ease;
    border-radius: 3rem !important;
    font-weight:500;
    background: color-mix(in srgb, var(--c-glass) 30%, transparent);
    backdrop-filter: blur(5px) ;
    -webkit-backdrop-filter: blur(5px) ;
  box-shadow:inset 0 0 0 1px 
     color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent), inset 0.8px 2.5px 0px -2px 
     color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent), inset -3px -2px 0px -2.4px 
     color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent), inset -3px -7.1px 1px -6px 
     color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent), inset -0.3px -1px 2px 0px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent), inset -1.5px 2.5px 0px -3px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 0px 3px 4px -2px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 4px -3px 1px -4px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 1px 5px 0px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 6px 16px 0px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
    color: #f00764;
    text-shadow: 0 0 7px #eceaddd6, 0 0 10px #ffffff70, 0 0 21px #ffffff8c;
}

.ts-box.glass .ts-button {
    text-shadow: 0 0 1px var(--c-bg), 0 0 10px var(--c-bg), 0 0 21px var(--shopsel-bg) !important;
}

.ts-box{
    border-radius: 1rem;
}

.glass .ts-app-navbar .item.is-active,.ts-tab.glass .item.is-active{
    border-radius: 5rem !important;
    color: #f00764 !important;
    background: color-mix(in srgb, var(--c-glass) 30%, transparent) !important;
    backdrop-filter: blur(5px) ;
    -webkit-backdrop-filter: blur(5px) ;
    box-shadow: inset 0 0 0 1px 
     color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent), inset 1.6px 1px 0px -1.4px 
     color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent), inset -1.5px -1px 0px -1px 
     color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent), inset -2px -6px 1px -5px 
     color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent), inset -1px 2px 3px -1px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 0px -4px 1px -2px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 3px 6px 0px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
}

.swipe-out-quick {
  animation-name: move-out;
  animation-duration: 0.6s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.swipe-in-quick {
  animation-name: move-in;
  animation-duration: 0.6s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.swipe-out {
  animation-name: move-out;
  animation-duration: 0.6s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.swipe-in {
  animation-name: move-in;
  animation-duration: 0.6s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.rswipe-out {
  animation-name: rmove-out;
  animation-duration: 0.6s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.rswipe-in {
  animation-name: rmove-in;
  animation-duration: 0.6s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}


.fade-in {
  animation-name: fade-in;
  animation-duration: 0.3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.fade-out {
  animation-name: fade-out;
  animation-duration: 0.3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.fade-up {
  animation-name: fade-up;
  animation-duration: 0.3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.fade-down {
  animation-name: fade-down;
  animation-duration: 0.3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.fade-right {
  animation-name: fade-right;
  animation-duration: 0.8s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.spin {
  animation-name: spin;
  animation-duration: 0.8s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.zizo {
  animation-name: zoomInZoomOut;
  animation-duration: 0.8s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes move-out {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes move-in {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes rmove-out {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes rmove-in {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes fade-down {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}

@keyframes fade-up {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}


@keyframes fade-in {
  0% { 
    opacity: 0; 
  }
  100% { 
    opacity: unset; 
  }
}

@keyframes fade-out {
  0% { 
    opacity: unset; 
  }
  100% { 
    opacity: 0; 
  }
}


@keyframes spin {
  from {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes zoomInZoomOut {
  0% {
    transform: scale(0.3, 0.3);
  }
  80% {
    transform: scale(1.07, 1.07);
  }
  100% {
    transform: scale(1, 1);
  }
}

@keyframes fade-right {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}


/* ===== iPhone Duo / 寬比例折疊機 =====
   依 Apple HIG「Designing for iPhone Duo」：
   - regular width (內螢幕、平板)：版面依可用空間延展，不用固定寬度；格狀內容用偶數欄
   - 外螢幕 (compact 但寬高比 ≥ 3:5) 與橫向：工具列與 tab bar 移到側邊直立，tab bar 只留圖示；
     最上方為 Logo (回首頁)，其下為返回 / 動作；設定鈕固定在 tab bar 下方；含文字的控制項維持水平
   - 可用寬度 < 420pt (例如 Safari 自己的側邊工具列佔掉空間) 時不切換，維持一般手機版面
   - 側列預設在右側，設定頁可改左側 (localStorage x50RailSide → html[data-rail="left"])
   - 內螢幕直拿：維持一般水平的上下列
   pointer: coarse 排除桌機瀏覽器；body:has(.x50-menubar) 讓規則只在新版 index.html 生效 */

/* 只在側列使用的元素，平常不顯示 */
.x50-navlogo, .x50-navuser, .x50-railopt {
    display: none;
}

/* --- regular width：延展版面 --- */
@media (pointer: coarse) and (min-width: 600px) {
    body:has(.x50-menubar) {
        max-width: none !important;
    }
    body:has(.x50-menubar) .x50-topbar {
        max-width: none !important;
    }
    body:has(.x50-menubar) .x50-menubar {
        left: 0;
        max-width: none !important;
        display: flex;
        justify-content: center;
    }
    body:has(.x50-menubar) .x50-menubar .globalmenu {
        width: min(100%, 480px);
    }
    /* 遊戲卡片 2 欄 → 4 欄，單張卡片維持手機上的比例 */
    body:has(.x50-menubar) #gameitem_list .half-gamesel {
        width: calc(25% - 6px) !important;
    }
    body:has(.x50-menubar) .ts-modal .modalglass {
        max-width: 560px;
        margin: auto auto 0 auto;
    }
}

/* --- 側邊直立控制列：外螢幕 (寬比例 compact) 與所有橫向 --- */
@media (pointer: coarse) and (min-aspect-ratio: 3/5) and (min-width: 420px) and (max-width: 599px), (pointer: coarse) and (orientation: landscape) {
    :root {
        /* 側列左右留白相同；--duo-btn 為 tab bar 與設定鈕寬，--duo-top 為上段按鈕大小 */
        --duo-gap: 8px;
        --duo-btn: 56px;
        --duo-top: 44px;
        /* 設定鈕：整圓看起來比同寬的膠囊大，略小於 tab bar 寬才會視覺等大 */
        --duo-user: 50px;
        --duo-user-edge: calc(var(--duo-inset) + var(--duo-gap) + (var(--duo-btn) - var(--duo-user)) / 2);
        --duo-inset: env(safe-area-inset-right, 0px);
        --duo-rail: calc(var(--duo-btn) + var(--duo-gap) * 2 + var(--duo-inset));
    }
    :root[data-rail="left"] {
        --duo-inset: env(safe-area-inset-left, 0px);
    }
    body:has(.x50-menubar) {
        width: auto !important;
        max-width: none !important;
        margin: 0 var(--duo-rail) 0 0 !important;
        scrollbar-width: none;
    }
    :root[data-rail="left"] body:has(.x50-menubar) {
        margin: 0 0 0 var(--duo-rail) !important;
    }
    /* 側列背景與內容背景相同 */
    :root:has(.x50-menubar) {
        background: var(--ts-gray-50);
        scrollbar-width: none;
    }
    :root:has(.x50-menubar)::-webkit-scrollbar, body:has(.x50-menubar)::-webkit-scrollbar {
        display: none;
    }
    body:has(.x50-menubar) #fake-half, body:has(.x50-menubar) #fake-content {
        width: calc(100vw - var(--duo-rail)) !important;
    }

    /* 上段：Logo (回首頁) 在最上，其下為返回或換背景 */
    body:has(.x50-menubar) .x50-topbar {
        top: 0 !important;
        right: 0;
        left: auto;
        width: var(--duo-rail) !important;
        max-width: none !important;
        padding: max(12px, env(safe-area-inset-top, 0px)) calc(var(--duo-gap) + var(--duo-inset)) 0 var(--duo-gap) !important;
    }
    :root[data-rail="left"] body:has(.x50-menubar) .x50-topbar {
        right: auto;
        left: 0;
        padding: max(12px, env(safe-area-inset-top, 0px)) var(--duo-gap) 0 calc(var(--duo-gap) + var(--duo-inset)) !important;
    }
    body:has(.x50-menubar) #navbar {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    body:has(.x50-menubar) .x50-navright {
        flex-direction: column;
        gap: 10px !important;
    }
    body:has(.x50-menubar) .x50-navlogo {
        display: flex;
    }
    body:has(.x50-menubar) .x50-navlead, body:has(.x50-menubar) .x50-navlogo, body:has(.x50-menubar) #bgBoxBtn {
        width: var(--duo-top) !important;
        height: var(--duo-top) !important;
        padding: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* Logo 與頭像只留一圈細玻璃邊 */
    body:has(.x50-menubar) .x50-navlead .ts-avatar, body:has(.x50-menubar) .x50-navlogo .ts-avatar, body:has(.x50-menubar) .x50-navuser .ts-avatar {
        width: calc(var(--duo-top) - 5px) !important;
        height: calc(var(--duo-top) - 5px) !important;
    }
    /* 原本放語系 / 點數與設定的膠囊拆開：設定移到 tab bar 下方，含文字的項目留在內容區 */
    body:has(.x50-menubar) .x50-navgroup {
        display: contents !important;
    }
    body:has(.x50-menubar) .x50-navgroup > a {
        display: none !important;
    }
    body:has(.x50-menubar) .x50-navtext {
        position: fixed;
        top: max(12px, env(safe-area-inset-top, 0px));
        right: calc(var(--duo-rail) + 8px);
        margin: 0 !important;
    }
    :root[data-rail="left"] body:has(.x50-menubar) .x50-navtext {
        right: calc(8px + env(safe-area-inset-right, 0px));
    }
    /* 拆掉膠囊後語系選單單獨顯示：內層 select 不再疊一層玻璃，與其他玻璃鈕同樣透明度 */
    body:has(.x50-menubar) .x50-navtext select {
        background: transparent !important;
    }
    /* 首頁：右上角已無任何按鈕 (語系移到介面設定)，上方留白縮短，背景區塊跟著內容高度 */
    body:has(.x50-menubar) #mbhere {
        padding-top: max(20px, env(safe-area-inset-top, 0px)) !important;
    }
    /* 點數膠囊單獨顯示時文字置中 (原本靠 ts-button 行高，手機字型會偏) */
    body:has(.x50-menubar) .x50-navtext.ts-button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        vertical-align: middle !important;
    }
    /* 側列的筆刷跟系統深淺色 (同其他側列按鈕)，不跟背景圖變色。
       圖示在 Tocas is-inverted 按鈕裡 (灰階會反轉)，所以顏色在外層 #bgBoxBtn 先算好再傳進去 */
    body:has(.x50-menubar) #bgBoxBtn {
        --x50-rail-ico: var(--ts-gray-900);
    }
    body:has(.x50-menubar) #eBGIco {
        color: var(--x50-rail-ico) !important;
        filter: none !important;
    }

    /* 設定鈕：固定在 tab bar 下方並置中 (首頁為齒輪，其他頁為使用者頭像) */
    body:has(.x50-menubar) .x50-navuser {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        z-index: 100;
        width: var(--duo-user);
        height: var(--duo-user);
        right: var(--duo-user-edge);
        bottom: max(12px, env(safe-area-inset-bottom, 0px));
        border-radius: 50px;
    }
    :root[data-rail="left"] body:has(.x50-menubar) .x50-navuser {
        right: auto;
        left: var(--duo-user-edge);
    }
    body:has(.x50-menubar) .x50-navuser .ts-avatar {
        width: calc(var(--duo-user) - 5px) !important;
        height: calc(var(--duo-user) - 5px) !important;
    }

    /* 下段 tab bar：只留圖示 */
    body:has(.x50-menubar) .x50-menubar {
        top: auto;
        bottom: 0 !important;
        right: 0;
        left: auto !important;
        width: var(--duo-rail) !important;
        max-width: none !important;
        padding: 0 calc(var(--duo-gap) + var(--duo-inset)) calc(max(12px, env(safe-area-inset-bottom, 0px)) + var(--duo-user) + 10px) var(--duo-gap) !important;
        display: block;
    }
    :root[data-rail="left"] body:has(.x50-menubar) .x50-menubar {
        right: auto;
        left: 0 !important;
        padding: 0 var(--duo-gap) calc(max(12px, env(safe-area-inset-bottom, 0px)) + var(--duo-user) + 10px) calc(var(--duo-gap) + var(--duo-inset)) !important;
    }
    body:has(.x50-menubar) .x50-menubar .globalmenu {
        width: var(--duo-btn);
        height: auto;
        padding: 4px !important;
        border-radius: 2.6rem !important;
    }
    body:has(.x50-menubar) .x50-menubar .globalmenu::after {
        border-radius: 2.6rem !important;
    }
    body:has(.x50-menubar) #globalmenu {
        flex-direction: column;
        height: auto;
    }
    body:has(.x50-menubar) #globalmenu .item {
        flex: none;
        width: 100%;
        height: calc(var(--duo-btn) - 8px);
        padding: 0;
    }
    body:has(.x50-menubar) #globalmenu .item .label {
        display: none;
    }
    body:has(.x50-menubar) #globalmenu .item .ts-icon {
        font-size: 19px;
    }
    /* 彈窗不蓋住側列 */
    body:has(.x50-menubar) .ts-modal {
        padding-right: calc(var(--duo-rail) + 8px) !important;
    }
    :root[data-rail="left"] body:has(.x50-menubar) .ts-modal {
        padding-right: 8px !important;
        padding-left: calc(var(--duo-rail) + 8px) !important;
    }
    /* 設定頁的「側邊控制列位置」只在側列版面顯示 */
    body:has(.x50-menubar) .x50-railopt {
        display: block;
    }
    /* 介面設定裡的側邊控制列位置：與其他列一樣左標題、右選項 */
    body:has(.x50-menubar) .ap-row.x50-railopt {
        display: flex;
    }
}

/* 橫向且高度很低 (外螢幕橫拿、一般手機橫拿)：tab bar 再縮小，避免與上段重疊 */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
    body:has(.x50-menubar) #globalmenu .item {
        height: 40px;
    }
}

/* ---- 共用樣式 (原本寫在各模板 / JS 字串裡) ---- */

/* 主要動作按鈕的紅字 (原本各模板 style="color:red")；!important 對應原本行內樣式的優先順序 */
.x50-red {
    color: red !important;
}

/* 養成箱：與首頁養成點數愛心同色；圖示 = 購物籃 + 右下小愛心。
   購物籃在愛心周圍挖空一圈 (mask)，露出背景當作間隔，深淺色都不會多一圈白。
   愛心不用字型圖示，改用同一個心形 SVG 當遮罩畫出來，挖空的位置才會跟愛心完全對齊。
   --hs 愛心大小 (購物籃的幾倍)、--hr / --hb 愛心超出購物籃右邊 / 下邊的距離 (愛心的幾倍)，都不帶單位；
   挖空的心形 = 愛心外擴 64/512 (viewBox -64 ~ 576)，所以遮罩比愛心大 640/512 倍、往外多 64/512。 */
.x50-heart {
    color: #ff1100bf !important;
}
.x50-hshop {
    --hs: .58;
    --hr: .45;
    --hb: .3;
    display: inline-block;
    position: relative;
    line-height: 1;
    margin-right: .7em;
}
.x50-hshop > .ts-icon {
    display: block; /* 遮罩以這個框為準，要跟外框 (愛心定位的基準) 一樣大 */
    font-size: 1em;
    margin: 0;
    text-shadow: none !important; /* glass 按鈕的文字光暈會被遮罩切成方框 */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-64 -64 640 640'%3E%3Cpath d='M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z' stroke='%23000' stroke-width='128' stroke-linejoin='round'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-64 -64 640 640'%3E%3Cpath d='M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z' stroke='%23000' stroke-width='128' stroke-linejoin='round'/%3E%3C/svg%3E"), linear-gradient(#000 0 0);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: calc(var(--hs) * 1.25em) calc(var(--hs) * 1.25em), 100% 100%;
    mask-size: calc(var(--hs) * 1.25em) calc(var(--hs) * 1.25em), 100% 100%;
    -webkit-mask-position: right calc(var(--hs) * (var(--hr) + .125) * -1em) bottom calc(var(--hs) * (var(--hb) + .125) * -1em), 0 0;
    mask-position: right calc(var(--hs) * (var(--hr) + .125) * -1em) bottom calc(var(--hs) * (var(--hb) + .125) * -1em), 0 0;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}
.x50-hshop > .x50-hheart {
    position: absolute;
    right: calc(var(--hs) * var(--hr) * -1em);
    bottom: calc(var(--hs) * var(--hb) * -1em);
    width: calc(var(--hs) * 1em);
    height: calc(var(--hs) * 1em);
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* 養成箱頁首：取代原本 .ts-blankslate > .ts-icon 的大圖示；整個維持白色 */
.ts-blankslate > .x50-hshop {
    --hs: .5;
    --hr: .4;
    --hb: .15;
    font-size: var(--icon-size);
    margin: .25rem 0 0;
    color: rgba(255, 255, 255, .95);
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, .7));
}
.ts-blankslate > .x50-hshop + .header {
    margin-top: var(--header-distance);
}

/* 設定彈窗的開關文字 (原本 5 個模板各有一份 .lb) */
@supports (-webkit-touch-callout: none) {
    /* iOS 的 ts-switch 文字貼太近 */
    .lb {
        padding-left: 20px;
    }
}
.lb {
    padding-top: 1px;
}

/* 預約頁的時長快選 (原本 resmid / respre 各一份) */
.resv-dur { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; font-size: .85rem; color: var(--ts-gray-600); }
.resv-dur button { border: 1px solid var(--ts-gray-300); border-radius: 1rem; padding: 2px 11px; background: color-mix(in srgb, var(--ts-gray-50) 60%, transparent); color: var(--ts-gray-800); font-size: .85rem; }
.resv-dur button.is-active { border-color: var(--ts-primary-500); color: var(--ts-primary-600); font-weight: 600; }
#durNow { margin-left: 2px; }

/* 首頁集點卡 (#cardc)：模糊 1.75px、無額外霧，跟上方用戶欄同一種玻璃 (0mu 2026-11-08)。巢狀 backdrop-filter 修正。有 backdrop-filter 的元素會成為 Backdrop Root，子元素的模糊取不到它後方的背景；
   卡片的玻璃模糊改由 ::before 負責，卡片本身用 isolation 建立圖層，外觀與原本的 blur(1.45px) 相同 (原本在 entry.js) */
/* 玻璃高光 (.glass 的 box-shadow) 也移到 ::before：放在卡片本身會被 ::before 的模糊蓋住，上緣高光變淡 */
#cardc{backdrop-filter:none !important; -webkit-backdrop-filter:none !important; isolation:isolate; box-shadow:none;}
#cardc::before{content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; pointer-events:none;backdrop-filter:blur(1.75px) saturate(var(--saturation)); -webkit-backdrop-filter:blur(1.75px) saturate(var(--saturation)); background:none;
    box-shadow:inset 0 0 0 1px 
     color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent), inset 0.8px 2.5px 0px -2px 
     color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent), inset -2.9px -0.5px 0px -2.4px 
     color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent), inset -4px -6.6px 3px -6px 
     color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent), inset -0.3px -1px 2px 0px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent), inset -1.5px 2.5px 0px -3px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 0px 3px 4px -2px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 4px -3px 1px -4px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 1px 5px 0px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 6px 16px 0px 
     color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);}

/* 集點卡集滿時中央的 liquid glass 膠囊 (原本在 entry.js) */
.st-claim{position:absolute; inset:0; z-index:3; border-radius:inherit; display:flex; align-items:center; justify-content:center; pointer-events:none;background:color-mix(in srgb, var(--c-light) 12%, transparent); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); animation:stBlurIn .5s ease-out both;}
@keyframes stBlurIn{from{backdrop-filter:blur(0); -webkit-backdrop-filter:blur(0); background:transparent;}
}
.st-cap{pointer-events:auto; display:flex; align-items:center; gap:12px; padding:7px 7px 7px 14px; border-radius:99rem !important;backdrop-filter:blur(14px) saturate(var(--saturation)) !important; -webkit-backdrop-filter:blur(14px) saturate(var(--saturation)) !important;}
.st-cap-ic{width:26px; height:34px; display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--x50-accent);}
.st-cap-t{display:flex; flex-direction:column; line-height:1.25; white-space:nowrap;}
.st-cap-t b{font-size:15px; color:var(--ts-gray-800);}
.st-cap-t span{font-size:12px; color:var(--ts-gray-700);}
.st-cap .ts-button{border:none; padding:0 16px; font-weight:700; white-space:nowrap;}
@media (prefers-color-scheme: light) {
    :where(html:not(.is-dark)) .st-cap {background-color:color-mix(in srgb, var(--c-light) 84%, transparent) !important;}
    :where(html:not(.is-dark)) .st-cap .ts-button {background-color:rgba(255,255,255,.95) !important;}
}
/* 使用者在「外觀」選了亮色：不論系統設定都套用 */
:where(html.is-light) .st-cap {background-color:color-mix(in srgb, var(--c-light) 84%, transparent) !important;}
:where(html.is-light) .st-cap .ts-button {background-color:rgba(255,255,255,.95) !important;}

@media (prefers-color-scheme: dark) {
    :where(html:not(.is-light)) .st-claim {background:color-mix(in srgb, var(--c-dark) 12%, transparent);}
}
/* 使用者在「外觀」選了暗色：不論系統設定都套用 */
:where(html.is-dark) .st-claim {background:color-mix(in srgb, var(--c-dark) 12%, transparent);}


/* 數位章貼抽獎彈窗 (原本在 entry.js；轉輪每格 64px、機率長條最高 56px) */
.lot-body{padding:14px 12px 16px !important; margin-top:8px; display:flex; flex-direction:column; align-items:center;}
#stampLotteryModal[data-spinning="1"] .glassclose{opacity:.35; pointer-events:none;}
.lot-reel{position:relative; height:192px; width:100%; max-width:300px; margin:4px auto 12px; overflow:hidden; border-radius:1rem;}
.lot-reel:before,.lot-reel:after{content:""; position:absolute; left:0; right:0; height:64px; z-index:2; pointer-events:none;}
.lot-reel:before{top:0; background:linear-gradient(180deg,var(--ts-gray-50),transparent);}
.lot-reel:after{bottom:0; background:linear-gradient(0deg,var(--ts-gray-50),transparent);}
.lot-window{position:absolute; left:14px; right:14px; top:64px; height:64px; z-index:3; pointer-events:none; border-radius:99rem;background:color-mix(in srgb, var(--x50-accent) 9%, transparent); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--x50-accent) 45%, transparent);}
.lot-strip{position:absolute; left:0; right:0; top:0; will-change:transform;}
.lot-item{height:64px; display:flex; align-items:center; justify-content:center;}
.lot-num{display:inline-flex; align-items:baseline; gap:5px; line-height:1; font-size:32px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--ts-gray-800);}
.lot-num small{font-size:14px; font-weight:600; color:var(--ts-gray-500);}
.lot-done .lot-item.is-win .lot-num{color:var(--x50-accent);}
.lot-win .lot-window{animation:lotGlow .9s ease-in-out 2;}
@keyframes lotGlow{50%{box-shadow:inset 0 0 0 1.5px var(--x50-accent), 0 0 18px color-mix(in srgb, var(--x50-accent) 35%, transparent);}
}
.lot-odds{width:100%; max-width:300px; margin-top:4px;}
.lot-odds-cap{font-size:12px; color:var(--ts-gray-500); text-align:center; margin-bottom:6px;}
.lot-chart{display:flex; align-items:flex-end; justify-content:center; gap:2px; height:74px; border-bottom:1px solid var(--ts-gray-300);}
.lot-col{flex:1; max-width:46px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%;}
.lot-pct{font-size:11px; line-height:1; color:var(--ts-gray-600); margin-bottom:4px; font-variant-numeric:tabular-nums;}
.lot-bar{width:70%; border-radius:4px 4px 0 0; background:var(--ts-gray-300); transition:background .3s;}
.lot-col.is-hit .lot-bar{background:var(--x50-accent);}
.lot-col.is-hit .lot-pct{color:var(--ts-gray-800); font-weight:700;}
.lot-axis{display:flex; justify-content:center; gap:2px;}
.lot-axis span{flex:1; max-width:46px; text-align:center; font-size:11px; color:var(--ts-gray-600); padding-top:4px;}
.lot-axis span.is-hit{color:var(--ts-gray-800); font-weight:700;}
.lot-result{display:grid; grid-template-rows:0fr; width:100%; margin-top:0; opacity:0; transition:grid-template-rows .45s ease, margin-top .45s ease, opacity .3s ease .15s;}
.lot-result-in{overflow:hidden; min-height:0; display:flex; flex-direction:column; align-items:center; gap:8px;}
.lot-done .lot-result{grid-template-rows:1fr; margin-top:16px; opacity:1;}
.lot-tics{display:flex; gap:8px; justify-content:center; align-items:center; height:36px; flex-shrink:0;}
.lot-tics .ts-icon{font-size:26px; color:var(--x50-accent); animation:lotPop .45s cubic-bezier(.2,1.6,.4,1) both;}
@keyframes lotPop{from{transform:scale(0) rotate(-25deg); opacity:0;}
 to{transform:scale(1) rotate(0); opacity:1;}
}
.lot-title{font-size:18px; font-weight:800; color:var(--ts-gray-800); text-align:center; min-height:30px; line-height:30px;}
.lot-title b{color:var(--x50-accent); font-size:22px; margin:0 3px;}
.lot-sub{font-size:13px; color:var(--ts-gray-600); text-align:center; min-height:20px;}
/* 愛心抽遊玩券說明視窗 (grade.js heartDraw，與抽獎畫面同一套 lot-* 樣式) */
.hdp-pp{display:flex; justify-content:space-between; align-items:baseline; width:100%; max-width:300px; margin-bottom:12px; font-size:13px; color:var(--ts-gray-600);}
.hdp-pp b{font-size:18px; font-weight:800; color:var(--ts-gray-800); font-variant-numeric:tabular-nums;}
.hdp-note{margin-top:12px; font-size:13px; font-weight:600; color:var(--x50-accent-strong); text-align:center;}
.hdp-meta{margin-top:6px; font-size:12px; color:var(--ts-gray-500); text-align:center;}
.lot-pulls{display:flex; flex-wrap:wrap; justify-content:center; gap:5px; max-width:300px;}
.lot-pulls:empty{display:none;}
.lot-pulls span{min-width:2rem; text-align:center; padding:2px 7px; border-radius:.7rem; font-size:13px; font-weight:700; background:color-mix(in srgb, var(--ts-gray-300) 45%, transparent); color:var(--ts-gray-800); font-variant-numeric:tabular-nums;}
.lot-pulls span.is-hit,.lot-pulls span.is-g{background:color-mix(in srgb, var(--x50-accent) 16%, transparent); color:var(--x50-accent-strong);}
.lot-pulls span small{font-weight:500; font-size:11px; margin-left:3px;}
#lotOk{margin-top:16px; border:none; height:40px; font-weight:700;}

/* 養成等級獎勵彈窗 (原本在 entry.js) */
.glv-body{padding:12px 14px 10px !important; margin-top:8px; max-height:calc(100dvh - 150px); overflow-y:auto;}
.glv-sum{font-size:13px; color:var(--ts-gray-600); text-align:center; margin:0 0 8px;}
.glv-sum b{color:var(--x50-accent); font-variant-numeric:tabular-nums;}
.glv-tree{position:relative; padding-left:34px;}
.glv-rail{position:absolute; left:13px; width:2px; border-radius:2px; background:var(--ts-gray-300);}
.glv-rail.more-top{-webkit-mask:linear-gradient(180deg,transparent,#000 22px); mask:linear-gradient(180deg,transparent,#000 22px);}
.glv-rail.more-bot{-webkit-mask:linear-gradient(0deg,transparent,#000 22px); mask:linear-gradient(0deg,transparent,#000 22px);}
.glv-rail.more-top.more-bot{-webkit-mask:linear-gradient(180deg,transparent,#000 22px,#000 calc(100% - 22px),transparent); mask:linear-gradient(180deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);}
.glv-rail i{position:absolute; left:0; top:0; width:100%; height:var(--fill,0px); border-radius:2px; background:var(--x50-accent);}
.glv-node{position:relative; padding:7px 0 7px 4px; min-height:52px; display:flex; align-items:center; gap:8px;}
.glv-dot{position:absolute; left:-27px; top:50%; width:12px; height:12px; margin-top:-6px; border-radius:50%; box-sizing:border-box; background:var(--ts-gray-50); border:2px solid var(--ts-gray-400); z-index:1;}
.glv-node.is-past .glv-dot{background:var(--x50-accent); border-color:var(--x50-accent);}
.glv-node.is-now .glv-dot{left:-30px; width:18px; height:18px; margin-top:-9px; border:4px solid var(--x50-accent); background:var(--ts-gray-50); box-shadow:0 0 0 4px color-mix(in srgb, var(--x50-accent) 22%, transparent);}
.glv-main{flex:1; min-width:0;}
.glv-head{display:flex; align-items:center; gap:8px; line-height:1.2;}
.glv-head b{font-size:15px; font-weight:800; color:var(--ts-gray-800); font-variant-numeric:tabular-nums;}
.glv-head small{font-size:11.5px; color:var(--ts-gray-500); font-variant-numeric:tabular-nums; white-space:nowrap;}
.glv-info{font-size:12.5px; color:var(--ts-gray-700); line-height:1.45; margin-top:3px;}
.glv-info b{color:var(--ts-gray-800); font-variant-numeric:tabular-nums;}
.glv-info .sep{color:var(--ts-gray-400); margin:0 5px;}
.glv-info span.nw{white-space:nowrap;}
.glv-node.is-past .glv-main{opacity:.55;}
.glv-node.is-now .glv-head b{color:var(--x50-accent);}
.glv-node.is-now .glv-main{padding:6px 10px; margin-left:-10px; border-radius:.9rem; background:color-mix(in srgb, var(--x50-accent) 8%, transparent);}
.glv-tag{flex:0 0 auto; margin-left:auto; font-size:11px; font-weight:700; line-height:1.5; padding:0 8px; border-radius:99rem; color:var(--x50-accent-on); background:var(--x50-accent);}
.glv-note{font-size:11px; color:var(--ts-gray-500); text-align:center; margin-top:6px;}

/* 養成小教室彈窗 (原本在 entry.js) */
#gradeGuideModal .modalglass{max-height:calc(100vh - 24px); overflow:auto;}
.gg-body{margin-top:8px; padding:14px 14px 16px !important;}
.gg-stat{display:flex; gap:8px;}
.gg-card{flex:1; min-width:0; border-radius:1.1rem; overflow:hidden; display:flex; flex-direction:column;}
.gg-card .gg-in{flex:1; padding:10px 12px;}
.gg-card.is-bottom-indicated{border-bottom:none;}
.gg-card.is-bottom-indicated::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1.1rem; box-sizing:border-box; border-bottom:.5px solid var(--ts-indicator-color); border-radius:0 0 1.1rem 1.1rem; pointer-events:none; opacity:.9; filter:drop-shadow(0 0 1.5px var(--ts-indicator-color)); -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);}
.gg-card .symbol{font-size:12px;}
.gg-card .k{font-size:12px; color:var(--ts-gray-600);}
.gg-card .v{font-size:26px; font-weight:500; line-height:1.2; font-variant-numeric:tabular-nums; color:var(--ts-gray-800);}
.gg-card .v small{font-size:13px; font-weight:400; color:var(--ts-gray-500); margin-left:3px;}
.gg-card .v.pink{color:var(--x50-accent);}
 .gg-card .v.yel{color:var(--ts-warning-500);}
.gg-card .s{font-size:11.5px; color:var(--ts-gray-500);}
.gg-bar{height:5px; border-radius:5px; background:var(--ts-gray-200); margin:6px 0 4px; overflow:hidden;}
.gg-bar i{display:block; height:100%; border-radius:5px; background:var(--x50-accent);}
.gg-h{font-size:14px; font-weight:800; color:var(--ts-gray-800); margin:16px 0 8px;}
.gg-f{font-size:13px; color:var(--ts-gray-700); line-height:1.9;}
.gg-f b{color:var(--ts-gray-800);}
.gg-chip{display:inline-block; padding:0 7px; border-radius:5px; font-weight:600; font-size:12.5px; line-height:1.7;}
.gg-chip.base{background:var(--ts-gray-200); color:var(--ts-gray-800);}
 .gg-chip.login{background:var(--ts-warning-500); color:#2b2b2b;}
.gg-x{color:var(--x50-accent); font-weight:800;}
.gg-bands{display:flex; gap:4px; flex-wrap:wrap; margin-top:2px;}
.gg-bands span{font-size:11.5px; padding:1px 7px; border-radius:20px; background:var(--ts-gray-100); color:var(--ts-gray-600);}
.gg-bands b{color:var(--ts-gray-800);}
.gg-calc{display:flex; align-items:center; gap:5px; flex-wrap:wrap; row-gap:8px; white-space:nowrap; font-size:13px; color:var(--ts-gray-600);}
.gg-calc .gg-price{margin-left:8px; width:108px;}
@media (max-width:440px){.gg-calc .ts-button{padding:0 9px;}
 .gg-calc .gg-price{margin-left:3px; width:76px;}
 .gg-calc .gg-price input{padding-left:.5rem; padding-right:.25rem;}
}
.gg-res{margin-top:10px; background:var(--ts-gray-100) !important; border:none; border-radius:1.1rem; overflow:hidden;}
.gg-res .gg-result{min-height:64px; display:flex; align-items:center; justify-content:center; text-align:center; padding:12px; font-size:15px; color:var(--ts-gray-800); font-variant-numeric:tabular-nums;}
.gg-res .symbol{font-size:10px;}
.gg-ex{margin-top:10px; font-variant-numeric:tabular-nums;}
.gg-ex td{white-space:nowrap; text-align:center; vertical-align:middle;}
.gg-ex .ts-table tbody tr td{padding-left:.6rem; padding-right:.6rem;}
.gg-ex .ts-table.is-small td{font-size:var(--gg-fs, 13px);}
@media (max-width:440px){.gg-ex .ts-table tbody tr td{padding-left:.4rem; padding-right:.4rem;}
 .gg-ex .ts-table tbody tr td.ic{width:44px; min-width:44px; padding:4px;}
 .gg-ex .gg-ic, .gg-ex .gg-ic img{width:30px; height:30px;}
}
.gg-ex .ts-table.is-definition tr + tr td:first-child:not(.is-secondary){background:transparent;}
.gg-ex td.ic{width:60px; min-width:60px; padding:4px;}
.gg-ex .gg-ic{position:relative; display:block; width:34px; height:34px; margin:auto;}
 .gg-ex .gg-ic img{width:34px; height:34px; display:block;}
.gg-ex .gg-ic.is-half::after{content:""; position:absolute; top:0; bottom:0; right:0; width:50%; background:var(--ts-gray-100); opacity:.75;}
.gg-ex .gg-pad{font-size:26px; color:var(--ts-gray-700);}
.gg-ex .x{color:var(--x50-accent);}
@media (prefers-color-scheme: dark) {
    :where(html:not(.is-light)) .gg-ex td.ic img {filter:invert(1);}
}
/* 使用者在「外觀」選了暗色：不論系統設定都套用 */
:where(html.is-dark) .gg-ex td.ic img {filter:invert(1);}

.gg-note{font-size:11px; color:var(--ts-gray-500); margin-top:2px;}
.gg-proc{margin-top:4px;}
.gg-proc, .gg-proc .item{align-items:flex-start;}
.gg-proc .item, .gg-proc .item:last-child{flex:1 1 0; justify-content:center; min-width:0;}
.gg-proc .item:after{position:absolute; top:calc(.5rem - 1px); left:calc(50% + .5rem); width:calc(100% - 1rem); margin:0;}
.gg-proc .item .label{font-size:12px; text-align:center; white-space:nowrap;}
.gg-proc .item .label .description{font-size:10px;}
.gg-calc .ts-button{border:none; padding:0 12px; height:30px; min-width:0;}

/* 首頁用戶資訊、集點卡底部的發光細線 (與養成「今日 3 倍剩餘」卡片相同的做法)：亮色淡黃、暗色白光 */
.x50-glow{ --x50-glow-c: var(--x50-glow-light, #ffe08a); }
@media (prefers-color-scheme: dark) {
    :where(html:not(.is-light)) .x50-glow { --x50-glow-c: var(--x50-glow-dark, rgba(255,255,255,.5)); }
}
/* 使用者在「外觀」選了暗色：不論系統設定都套用 */
:where(html.is-dark) .x50-glow { --x50-glow-c: var(--x50-glow-dark, rgba(255,255,255,.5)); }

.x50-glow::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1.1rem; box-sizing:border-box; border-bottom:.5px solid var(--x50-glow-c); border-radius:0 0 1.1rem 1.1rem; pointer-events:none; opacity:.9; filter:drop-shadow(0 0 1.5px var(--x50-glow-c)) drop-shadow(0 0 2.5px var(--x50-glow-c)); -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);}
/* 養成卡片：自動時依角色取色 (--x50-glow-ava-*)，沒有就沿用上面那組 */
.x50-glow.x50-glow-ava{ --x50-glow-c: var(--x50-glow-ava-light, var(--x50-glow-light, #ffe08a)); }
@media (prefers-color-scheme: dark) {
    :where(html:not(.is-light)) .x50-glow.x50-glow-ava { --x50-glow-c: var(--x50-glow-ava-dark, var(--x50-glow-dark, rgba(255,255,255,.5))); }
}
:where(html.is-dark) .x50-glow.x50-glow-ava { --x50-glow-c: var(--x50-glow-ava-dark, var(--x50-glow-dark, rgba(255,255,255,.5))); }
/* 外觀設定：首頁發光條選「關閉」 */
html.x50-glow-off .x50-glow::after{display:none;}
/* 亮色：線不加粗、不加光暈，改用較亮較飽和的顏色 (appearance.js glowColor) 並且不透明，讓線本身更亮；暗色維持 */
@media (prefers-color-scheme: light) {
    :where(html:not(.is-dark)) .x50-glow::after {opacity:1;}
}
:where(html.is-light) .x50-glow::after {opacity:1;}

/* 衣櫃篩選：角色下拉選單 + 只看已解鎖 (Tocas switch)，不加底色 (不固定，避免透明時蓋在衣裝上) */
.ava-filter{padding:8px 8px 2px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.ava-filter .ts-select{flex:1 1 140px; max-width:220px;}
.ava-have{font-size:13px;}

/* 機台頁今日優惠時段指示條 (game.js dayBarHTML)：圖示在左、名稱與狀態在右 (整組靠左，與軌道左緣對齊)；下方細玻璃軌道，顏色說明在軌道上方靠右
   粉 = 優惠、橘 = 早鳥 (只顯示自己級距的時段)；主視覺高度與按鈕位置維持原樣 (237px) */
.shopsel.has-dbar .ts-blankslate { padding: 51px 0 17px; /* 左右留白：手機 (≤420px) 32px，越寬越多，最多 86px */ --dbar-side: clamp(32px, calc(15vw - 31px), 86px); }
.dhead { display: flex; align-items: center; justify-content: flex-start; gap: 9px; margin: 0 var(--dbar-side) -4px; }
.dhead .grow-icon { margin: 0; flex: none; }
.dhead-text { text-align: left; min-width: 0; }
.dhead-text .grow-text.header { margin: 0; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbar-status { display: flex; align-items: center; margin-top: 3px; font-size: 12px; font-weight: 700; line-height: 1.3; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); white-space: nowrap; }
.dbar-status .ts-icon, .dbar-status span { font-size: inherit; } .dbar-status .ts-icon { margin-right: 4px; line-height: 1; height: auto; width: auto; vertical-align: 0; }
.dbar-status .dbar-tail { margin-left: 8px; }
.dbar { --dis: #F4106B; --early: #FFB020; --promo: #19D3FF; margin: 0 var(--dbar-side) 4px; text-align: left; }
.dbar-legend { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 6px; font-size: 11.5px; line-height: 14px; color: #fff; opacity: .9; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.dbar-legend i { display: inline-block; width: 10px; height: 5px; border-radius: 99px; margin-right: 4px; vertical-align: 2px; }
.dbar-legend i.is-dis { background: var(--dis); box-shadow: 0 0 4px var(--dis), 0 0 9px color-mix(in srgb, var(--dis) 70%, transparent); }
.dbar-legend i.is-early { background: var(--early); box-shadow: 0 0 4px var(--early), 0 0 9px color-mix(in srgb, var(--early) 70%, transparent); }
.dbar-wrap { position: relative; }
.dbar-track { position: relative; height: 4px; border-radius: 99px; overflow: hidden;
    background: color-mix(in srgb, #fff 22%, transparent);
    backdrop-filter: blur(6px) saturate(1.4); -webkit-backdrop-filter: blur(6px) saturate(1.4);
    box-shadow: inset 0 0 0 .5px rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.2); }
.dbar-track i { position: absolute; top: 0; bottom: 0; }
.dbar-track i.is-dis { background: var(--dis); }
.dbar-track i.is-early { background: var(--early); }
.dbar-track i.is-promo { background: var(--promo); box-shadow: 0 0 6px var(--promo); }
.dbar-legend i.is-promo { background: var(--promo); box-shadow: 0 0 4px var(--promo), 0 0 9px color-mix(in srgb, var(--promo) 70%, transparent); }
.dbar-track i.is-past { opacity: .4; }
.dbar-now { position: absolute; top: 2px; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff;
    box-shadow: 0 0 0 1.5px rgba(255,255,255,.3), 0 0 6px rgba(255,255,255,.85), 0 1px 2px rgba(0,0,0,.35); }
.dbar-axis { position: relative; height: 10px; margin-top: 2px; font-size: 8.5px; line-height: 10px; color: rgba(255,255,255,.75); }
.dbar-axis span { position: absolute; transform: translateX(-50%); }
.dbar-axis span:first-child { transform: none; }
.dbar-axis span:last-child { transform: translateX(-100%); }

/* DBBridge 等候畫面 (static/js/standby.js)：與 nginx 等候頁同一設計，蓋住整個畫面 */
.x50-standby { position: fixed; inset: 0; z-index: 100000; overflow-y: auto;
    background: rgba(255, 255, 255, 0.35); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
.x50-sb-wrap { max-width: 480px; min-height: 100%; margin: 0 auto; padding: 24px 0; display: flex; flex-direction: column; justify-content: center; }
.x50-sb-ava { display: flex; justify-content: center; }
.x50-sb-ava .ts-box { border-radius: 50px; padding: 2px; }
.x50-sb-ava .ts-avatar { width: 64px; height: 64px; margin: 0; border: 0; }
.x50-sb-card { margin: 22px 16px 14px 18px; padding: 26px 22px 22px; border-radius: 1.8rem; text-align: center; }
.x50-sb-row { display: flex; align-items: center; justify-content: center; gap: 10px; }
.x50-sb-spin { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(240, 7, 100, 0.18); border-top-color: #f00764;
    animation: x50-sb-spin 0.9s linear infinite; }
@keyframes x50-sb-spin { to { transform: rotate(360deg); } }
.x50-sb-title { font-size: 1.2rem; font-weight: 700; color: var(--ts-gray-800); }
.x50-sb-text { margin-top: 10px; font-size: 0.95rem; line-height: 1.7; color: var(--ts-gray-600); }
.x50-sb-divider { height: 1px; margin: 18px 0 14px; background: var(--ts-gray-200); }
.x50-sb-st { font-size: 0.88rem; min-height: 1.5em; color: var(--ts-gray-500); }
.x50-sb-st b { color: var(--ts-gray-800); font-weight: 600; }
.x50-sb-btn { margin-top: 14px; height: 42px; font-weight: 600; }
.x50-sb-host { margin-top: 10px; font-size: 0.75rem; color: var(--ts-gray-400); }
@media (prefers-color-scheme: dark) { :where(html:not(.is-light)) .x50-standby { background: rgba(0, 0, 0, 0.5); } }
:where(html.is-dark) .x50-standby { background: rgba(0, 0, 0, 0.5); }

/* 發光條選單 .x50-sel-glow (店鋪 / 釘選機種選單、禮物頁、OneClick 分店 tab)：選到的選項不用膠囊、字與其他選項相同；
   選項下方的發光條與首頁發光條 (.x50-glow::after) 完全相同：同一組顏色 (亮色 / 暗色 / 外觀設定)、.5px 線、兩層 drop-shadow、
   亮色不透明 / 暗色 .9；線畫在整條選單的下緣 (沿選單圓角)，再用 mask 只露出選到的那一格，兩端各淡出該格寬度的 16% */
.x50-sel-glow{ --x50-glow-c: var(--x50-glow-light, #ffe08a); --sel-n: 1; --sel-i: 0; }
/* 亮色 / 暗色都用亮色那組發光色 (使用者指定) */
/* 按下整條選單 (s-hover) 的縮放要順滑；點選項時的發光條動畫見 shared.js selBounce */
/* 發光條位置與拉伸註冊成數字，shared.js selBounce 用 Web Animations 播 */
@property --sel-i { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --sel-sx { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --sel-sy { syntax: '<number>'; inherits: true; initial-value: 1; }
:is(.ts-selection, .ts-tab).glass.x50-sel-glow{ transition: transform .18s ease; }
/* 整條選單很寬，s-hover 的 1.01 會放大約 4px 太明顯；只在這裡改小 (不動 .s-hover 本身，其他元素照舊) */
:is(.ts-selection, .ts-tab).glass.x50-sel-glow.s-hover:active{ transform: scale(1.004); }
/* tab 版 (OneClick 分店)：選到的不用膠囊、字與其他選項相同；左右 padding 與 selection 不同 */
.ts-tab.x50-sel-glow{ --sel-pad: .25rem; }
.ts-tab.glass.x50-sel-glow .item.is-active{
    background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    color: rgba(255,255,255,0.9) !important; text-shadow: 0 0 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.5), 0 0 21px rgba(0,0,0,0.3);
}
.ts-selection.glass.x50-sel-glow input:checked+.text{
    background: transparent !important; box-shadow: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important; animation: none;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 0 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.5), 0 0 21px rgba(0,0,0,0.3);
}
/* (Fable 建議) 同一套 CSS 在圖上看起來不會一樣：首頁的線在平的淺色卡片上，這裡在同亮度的插圖與玻璃白邊上。
   所以：選單維持原本的 .glass 玻璃質感 (與首頁卡片相同)，線改成實心細條 (不用次像素 border)、只畫在選單平直的部分，
   三層 drop-shadow 補足光暈；兩端用較長的漸層淡出 */
:is(.ts-selection, .ts-tab).glass.x50-sel-glow::after{
    content: ""; position: absolute; z-index: 1; pointer-events: none;
    --sel-w: calc((100% - var(--sel-pad, .35rem) * 2) / var(--sel-n));
    --sel-l: calc(var(--sel-pad, .35rem) + var(--sel-w) * var(--sel-i));
    left: max(calc(var(--sel-l) + var(--sel-w) * .10), 1.25rem);
    right: max(calc(100% - var(--sel-l) - var(--sel-w) * .90), 1.25rem);
    bottom: 0; height: .6px; border-radius: 1px;
    /* 滑動時拉長 / 撞牆壓扁 (shared.js selBounce) */
    transform: scale(var(--sel-sx, 1), var(--sel-sy, 1)); transform-origin: center bottom;
    background: linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--x50-glow-c) 35%, transparent) 15%, var(--x50-glow-c) 35%, var(--x50-glow-c) 65%, color-mix(in srgb, var(--x50-glow-c) 35%, transparent) 85%, transparent 100%);
    /* 光暈往上偏，線下方 (選單外) 的光暈較短；線下方一點點深色陰影，讓發光條更立體；drop-shadow 跟著線的透明度，兩端一起淡出 */
    filter: drop-shadow(0 .6px .6px rgba(0,0,0,.35)) drop-shadow(0 -.5px 1.5px var(--x50-glow-c)) drop-shadow(0 -1px 2.5px var(--x50-glow-c)) drop-shadow(0 -1.5px 4px var(--x50-glow-c));
    opacity: 1;
}
html.x50-glow-off :is(.ts-selection, .ts-tab).glass.x50-sel-glow::after { display: none; }
:is(.ts-selection, .ts-tab).glass.x50-sel-glow:not(:has(input:checked, > .item.is-active))::after { display: none; }
.x50-sel-glow:has(> .item:nth-child(1):last-child){ --sel-n: 1; }
.x50-sel-glow:has(> .item:nth-child(2):last-child){ --sel-n: 2; }
.x50-sel-glow:has(> .item:nth-child(3):last-child){ --sel-n: 3; }
.x50-sel-glow:has(> .item:nth-child(4):last-child){ --sel-n: 4; }
.x50-sel-glow:has(> .item:nth-child(5):last-child){ --sel-n: 5; }
.x50-sel-glow:has(> .item:nth-child(6):last-child){ --sel-n: 6; }
.x50-sel-glow:has(> .item:nth-child(7):last-child){ --sel-n: 7; }
.x50-sel-glow:has(> .item:nth-child(8):last-child){ --sel-n: 8; }
.x50-sel-glow:has(> .item:nth-child(9):last-child){ --sel-n: 9; }
.x50-sel-glow:has(> .item:nth-child(10):last-child){ --sel-n: 10; }
.x50-sel-glow:has(> .item:nth-child(1) input:checked){ --sel-i: 0; }
.x50-sel-glow:has(> .item:nth-child(2) input:checked){ --sel-i: 1; }
.x50-sel-glow:has(> .item:nth-child(3) input:checked){ --sel-i: 2; }
.x50-sel-glow:has(> .item:nth-child(4) input:checked){ --sel-i: 3; }
.x50-sel-glow:has(> .item:nth-child(5) input:checked){ --sel-i: 4; }
.x50-sel-glow:has(> .item:nth-child(6) input:checked){ --sel-i: 5; }
.x50-sel-glow:has(> .item:nth-child(7) input:checked){ --sel-i: 6; }
.x50-sel-glow:has(> .item:nth-child(8) input:checked){ --sel-i: 7; }
.x50-sel-glow:has(> .item:nth-child(9) input:checked){ --sel-i: 8; }
.x50-sel-glow:has(> .item:nth-child(10) input:checked){ --sel-i: 9; }
.x50-sel-glow:has(> .item:nth-child(1).is-active){ --sel-i: 0; }
.x50-sel-glow:has(> .item:nth-child(2).is-active){ --sel-i: 1; }
.x50-sel-glow:has(> .item:nth-child(3).is-active){ --sel-i: 2; }
.x50-sel-glow:has(> .item:nth-child(4).is-active){ --sel-i: 3; }
.x50-sel-glow:has(> .item:nth-child(5).is-active){ --sel-i: 4; }
.x50-sel-glow:has(> .item:nth-child(6).is-active){ --sel-i: 5; }
.x50-sel-glow:has(> .item:nth-child(7).is-active){ --sel-i: 6; }
.x50-sel-glow:has(> .item:nth-child(8).is-active){ --sel-i: 7; }
.x50-sel-glow:has(> .item:nth-child(9).is-active){ --sel-i: 8; }
.x50-sel-glow:has(> .item:nth-child(10).is-active){ --sel-i: 9; }

/* ---------- 首頁活動列表 (event.js renderEvents)：圖示與文字都用一般灰色，不另加底色 ---------- */
.evh{margin:12px 20px 2px; padding:2px 0 !important;}
.evh-item{display:flex; align-items:center; gap:10px; padding:10px 14px;}
.evh-item + .evh-item{border-top:1px solid color-mix(in srgb, var(--ts-gray-300) 50%, transparent);}
/* 左側圖示：淡灰色圓框 (不用主視覺色) */
.evh-ico{flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--ts-gray-600);
    background:color-mix(in srgb, var(--ts-gray-300) 22%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ts-gray-400) 40%, transparent);}
.evh-item{cursor:pointer; transition:background .15s;}
.evh-item:active{background:color-mix(in srgb, var(--ts-gray-300) 25%, transparent);}
.evh-main{flex:1; min-width:0;}
.evh-l1{display:flex; align-items:baseline; gap:6px;}
.evh-name{font-weight:700; font-size:14px; line-height:1.3; color:var(--ts-gray-800); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
.evh-time{margin-left:auto; flex:0 0 auto; font-size:11.5px; color:var(--ts-gray-500); white-space:nowrap;}
.evh-meta{display:flex; align-items:center; gap:10px; margin-top:3px; font-size:12px; line-height:1.4; color:var(--ts-gray-600); white-space:nowrap; overflow:hidden; mask-image:linear-gradient(90deg,#000 calc(100% - 16px),transparent); -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 16px),transparent);}
.evh-meta span{display:inline-flex; align-items:center; gap:4px; flex:0 0 auto;}
.evh-meta .ts-icon{font-size:10.5px; color:var(--ts-gray-500);}
.evh-desc{margin-top:3px; font-size:12px; line-height:1.45; color:var(--ts-gray-600);}
.evh-stamp{position:relative; flex:0 0 auto; width:34px; height:34px;}
.evh-stamp img{width:100%; height:100%; object-fit:contain; border-radius:50%;}
.evh-stamp .n{position:absolute; right:-6px; bottom:-4px; font-size:10px; font-weight:700; line-height:1; padding:2px 4px; border-radius:99rem; background:var(--ts-gray-50); color:var(--ts-gray-700); box-shadow:0 0 0 1px color-mix(in srgb, var(--ts-gray-400) 50%, transparent);}

/* ---------- 活動結算視窗 (event.js showEventResult) ---------- */
.evr-sub{font-size:12.5px; color:var(--ts-gray-500); margin-top:2px;}
/* 捲動區要留內距，否則卡片的陰影與圓角會被切掉 */
.evr-list{display:flex; flex-direction:column; gap:8px; margin:8px -6px -4px; padding:4px 6px 12px; max-height:40vh; overflow:auto;}
.evr-ev{ padding:14px 16px !important;}
.evr-top{display:flex; align-items:center; gap:8px;}
.evr-name{flex:1; min-width:0; font-weight:700; font-size:15px; color:var(--ts-gray-800); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.evr-st{flex:0 0 auto; display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--ts-gray-500);}
.evr-st.is-ok{color:var(--ts-gray-700);}
.evr-prog{display:flex; align-items:center; gap:10px; margin-top:10px;}
.evr-prog span{font-size:12px; color:var(--ts-gray-600); white-space:nowrap; font-variant-numeric:tabular-nums;}
/* 進度條：與機台頁今日優惠時段指示條 (.dbar) 同一風格，4px 細玻璃軌道 + 發光的主視覺色 + 白色圓點標目前位置 */
.evr-bar{position:relative; flex:1; height:4px;}
.evr-track{position:absolute; inset:0; border-radius:99px; overflow:hidden;
    background:color-mix(in srgb, var(--ts-gray-400) 30%, transparent);
    box-shadow:inset 0 0 0 .5px color-mix(in srgb, var(--ts-gray-400) 45%, transparent);}
.evr-track i{position:absolute; left:0; top:0; bottom:0; width:0; border-radius:99px; background:var(--x50-accent); transition:width .9s cubic-bezier(.2,.8,.2,1) .15s;}
.evr-glow{position:absolute; left:0; top:0; bottom:0; width:0; border-radius:99px; pointer-events:none; transition:width .9s cubic-bezier(.2,.8,.2,1) .15s;
    box-shadow:0 0 4px var(--x50-accent), 0 0 9px color-mix(in srgb, var(--x50-accent) 70%, transparent);}
.evr-dot{position:absolute; top:2px; left:0; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:#fff; transition:left .9s cubic-bezier(.2,.8,.2,1) .15s;
    box-shadow:0 0 0 1.5px rgba(255,255,255,.3), 0 0 6px rgba(255,255,255,.85), 0 1px 3px rgba(0,0,0,.35);}
.evr-got{display:flex; gap:10px; margin-top:10px;}
.evr-tile{flex:1; min-width:0; padding:16px 10px 14px !important; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;}
.evr-vis{height:40px; display:flex; align-items:center; justify-content:center; gap:4px;}
.evr-vis .ts-icon{font-size:22px; color:var(--ts-gray-700); animation:lotPop .45s cubic-bezier(.2,1.6,.4,1) both;}
.evr-vis img{width:40px; height:40px; object-fit:contain; border-radius:50%; animation:lotPop .45s cubic-bezier(.2,1.6,.4,1) both;}
.evr-vis img + img{margin-left:-12px;}
.evr-num{font-size:26px; font-weight:800; line-height:1; color:var(--ts-gray-800); font-variant-numeric:tabular-nums;}
.evr-num small{font-size:13px; font-weight:600; color:var(--ts-gray-600); margin-left:3px;}
.evr-lbl{font-size:12px; color:var(--ts-gray-600);}
/* 遊玩券 / 回饋點數的圖示與數字用強調色 */
.evr-tile.is-ticket .evr-vis .ts-icon, .evr-tile.is-ticket .evr-num{color:var(--x50-accent);}
.evr-none{margin-top:12px; text-align:center; font-size:13px; color:var(--ts-gray-500);}
.evr-ok{margin-top:14px; height:44px;}

/* ---------- 活動詳情視窗 (event.js openEventDetail) ---------- */
/* 詳情 / 結算的內容放在不透明的 ts-box 裡 (同數位張貼抽獎 .lot-body)，否則 modalglass 是透明的、會看到後面的頁面 */
.ev-body{margin-top:12px; padding:2px 12px 12px !important;}
.ev-body > :first-child{margin-top:10px;}
.ev-body .evr-list{margin-top:6px;}
.evd-title{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
/* 系列活動進度條：與 .dbar 相同的 4px 玻璃軌道 + 發光主視覺色 + 白點 */
.evd-days{margin:14px 4px 2px;}
.evd-days-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; font-size:12.5px; color:var(--ts-gray-500);}
.evd-days-head b{font-size:13.5px; color:var(--ts-gray-800);}
.evd-dbar{position:relative; height:4px;}
.evd-dtrack{position:absolute; inset:0; border-radius:99px; overflow:hidden;
    background:color-mix(in srgb, var(--ts-gray-400) 30%, transparent);
    box-shadow:inset 0 0 0 .5px color-mix(in srgb, var(--ts-gray-400) 45%, transparent);}
.evd-dtrack i{position:absolute; top:0; bottom:0; border-radius:99px; background:var(--x50-accent);}
.evd-dtrack i.is-past{opacity:.4;}
.evd-dtrack i.is-now{box-shadow:0 0 4px var(--x50-accent), 0 0 9px color-mix(in srgb, var(--x50-accent) 70%, transparent);}
.evd-ddot{position:absolute; top:2px; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:#fff;
    box-shadow:0 0 0 1.5px rgba(255,255,255,.3), 0 0 6px rgba(255,255,255,.85), 0 1px 3px rgba(0,0,0,.35);}
/* 今日進度：同一種玻璃條，改用橘色 (機台頁的早鳥色) 區分；白點與填色跟著目前累積移動 */
.evd-pbar .evd-dtrack i.is-now{left:0; width:0; background:#FFB020; box-shadow:0 0 4px #FFB020, 0 0 9px color-mix(in srgb, #FFB020 70%, transparent); transition:width .9s cubic-bezier(.2,.8,.2,1) .1s;}
.evd-pbar .evd-dtrack b{position:absolute; top:0; bottom:0; width:2px; margin-left:-1px; z-index:1; background:var(--ts-gray-50); opacity:.9;}
.evd-pbar .evd-ddot{left:0; transition:left .9s cubic-bezier(.2,.8,.2,1) .1s;}
.evd-psub{margin-top:6px; font-size:12px; color:var(--ts-gray-500);}
.evd-ploading{height:44px;}
.evd-daxis{display:flex; justify-content:space-between; margin-top:5px; font-size:10.5px; color:var(--ts-gray-500);}
.evd-settle{display:flex; align-items:center; gap:6px; margin:12px 4px 0; font-size:14px; font-weight:700; color:var(--ts-gray-800);}
.evd-settle .ts-icon{font-size:13px; color:var(--ts-gray-500);}
.evd-desc{margin:12px 4px 0; font-size:13.5px; line-height:1.6; color:var(--ts-gray-700);}
.evd-rows{margin-top:12px; padding:4px 14px !important;}
.evd-row{display:flex; align-items:center; gap:10px; padding:9px 0; font-size:13px;}
.evd-row + .evd-row{border-top:1px solid color-mix(in srgb, var(--ts-gray-300) 50%, transparent);}
.evd-ico{flex:0 0 auto; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--ts-gray-600);
    background:color-mix(in srgb, var(--ts-gray-300) 22%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ts-gray-400) 40%, transparent);}
.evd-k{flex:0 0 auto; color:var(--ts-gray-500);}
.evd-v{flex:1; min-width:0; text-align:right; color:var(--ts-gray-800); font-weight:600;}
.evd-stamp{margin-top:10px; display:flex; align-items:center; gap:12px; padding:12px 14px !important;}
.evd-stamp img{flex:0 0 auto; width:46px; height:46px; object-fit:contain; border-radius:50%;}
.evd-stamp-t{min-width:0;}
.evd-stamp-n{font-weight:700; font-size:14px; color:var(--ts-gray-800); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.evd-stamp-c{margin-top:2px; font-size:12.5px; color:var(--ts-gray-600);}
.evd-foot{margin:12px 4px 2px; font-size:11.5px; line-height:1.6; color:var(--ts-gray-500);}

/* 首頁集點卡的區域標籤 */
.cou-card { position: relative; }
.cou-reg.ts-chip.glass { position: absolute; top: 8px; right: 8px; padding: 1px 10px; font-size: .75rem; line-height: 1.5; pointer-events: none; }

/* 強制選區視窗 (region.js forceRegion)：蓋過所有畫面 */
.ts-modal.rg-force { z-index: 10010; }
.rg-opt { margin: 10px 0; cursor: pointer; }
.rg-opt .ts-content { padding: 12px 14px; }
.rg-name { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.rg-name .ts-icon { color: var(--ts-gray-500); }
.rg-desc { margin-top: 4px; font-size: 12.5px; color: var(--ts-gray-600); }
.rg-opt.is-loading { opacity: .5; pointer-events: none; }
.rg-note { margin: 6px 4px 2px; font-size: 12px; color: var(--ts-gray-500); line-height: 1.6; }

/* 月票購買 (subs.js)：與活動詳情相同的 ev-body / evd-row；時段比對用 4px 玻璃條，只有購買後增加的時段上色 */
.vp-sec{margin:14px 4px 6px; font-size:12px; font-weight:700; color:var(--ts-gray-500); letter-spacing:.02em;}
.vp-sec:first-child{margin-top:12px;}
.vp-row-r{margin-left:auto; font-weight:700; color:var(--ts-gray-800); white-space:nowrap;}
.evd-ico.is-no{color:var(--ts-negative-500);}
.vp-btn{margin-top:12px;}
.vp-pay{color:var(--x50-accent) !important; font-weight:700;}
.vp-plan{display:flex; align-items:center; gap:12px; margin-top:8px; padding:10px 14px !important; cursor:pointer;}
.vp-plan .vp-radio{flex:0 0 auto; width:18px; height:18px; border-radius:50%; box-shadow:inset 0 0 0 2px var(--ts-gray-300);}
.vp-plan-t{flex:1; min-width:0;}
.vp-plan-n{font-weight:700; font-size:14.5px; color:var(--ts-gray-900);}
.vp-plan-d{margin-top:2px; font-size:11.5px; color:var(--ts-gray-500); line-height:1.5;}
.vp-plan-p{text-align:right; white-space:nowrap;}
.vp-plan-p b{font-size:20px; font-weight:800; color:var(--ts-gray-900);} .vp-plan-p span{font-size:11px; color:var(--ts-gray-500);}
.vp-cmp{margin-top:10px; padding:10px 14px 12px !important;}
.vp-cmp-h{display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:700; color:var(--ts-gray-800);}
.vp-seg{display:flex; gap:2px; padding:2px; border-radius:99px; background:color-mix(in srgb,var(--ts-gray-300) 40%,transparent);}
.vp-seg span{font-size:11px; padding:2px 9px; border-radius:99px; color:var(--ts-gray-600); cursor:pointer;}
.vp-seg span.is-on{background:#fff; color:var(--ts-gray-900); font-weight:700; box-shadow:0 1px 3px rgba(0,0,0,.08);}
.vp-lg{display:flex; gap:10px; margin:8px 0 2px; font-size:10.5px; color:var(--ts-gray-500);}
.vp-lg i{display:inline-block; width:10px; height:5px; border-radius:99px; margin-right:4px; vertical-align:1px;}
.vp-lg i.is-cur, .vp-track i.is-cur{background:color-mix(in srgb,var(--ts-gray-500) 55%,transparent);}
.vp-lg i.is-add, .vp-track i.is-add{background:var(--x50-accent); box-shadow:0 0 3px color-mix(in srgb,var(--x50-accent) 60%,transparent);}
.vp-bar{margin-top:10px;}
.vp-bar-h{display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:12px; color:var(--ts-gray-700); margin-bottom:5px;}
.vp-bar-h b{font-weight:700; white-space:nowrap;} .vp-bar-h em{font-style:normal; font-size:11px; color:var(--ts-gray-500); text-align:right;}
.vp-bar-h em.is-add{color:var(--x50-accent);}
.vp-track{position:relative; height:4px; border-radius:99px; background:color-mix(in srgb,var(--ts-gray-400) 28%,transparent); box-shadow:inset 0 0 0 .5px rgba(255,255,255,.6);}
.vp-track i{position:absolute; top:0; bottom:0; border-radius:99px;}
.vp-track .vp-now{position:absolute; top:2px; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.25);}
.vp-axis{position:relative; height:12px; margin-top:4px; font-size:9.5px; color:var(--ts-gray-500);}
.vp-axis span{position:absolute; transform:translateX(-50%);} .vp-axis span:first-child{transform:none;} .vp-axis span:last-child{transform:translateX(-100%);}
.vp-note{margin-top:8px; font-size:10.5px; line-height:1.5; color:var(--ts-gray-500);}
.vp-auto{display:flex; gap:6px; align-items:flex-start; margin-top:10px; font-size:11px; line-height:1.55; color:var(--ts-gray-500);}
.vp-auto .ts-icon{font-size:11px; margin-top:2px;}
.vp-warn{margin:12px 4px 0; font-size:12px; line-height:1.6; color:var(--ts-negative-500); font-weight:600;}
.vp-short{color:var(--ts-negative-500);}
.vp-fr{display:flex; align-items:center; gap:8px; margin-top:8px;}
.vp-fr .ts-input{flex:1;} .vp-fr .ts-input input{font-size:13px;}
.vp-n{flex:0 0 auto; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--ts-gray-600); background:color-mix(in srgb,var(--ts-gray-300) 45%,transparent);}
.vp-chk{min-height:16px; margin:4px 6px 0; padding-left:30px; font-size:11.5px;}
.vp-chk.is-ok{color:#11744f;} .vp-chk.is-bad{color:var(--ts-negative-500);} .vp-chk.is-wait{color:var(--ts-gray-500);}
.vp-chk b{font-weight:700; color:var(--ts-gray-900); letter-spacing:.04em;}
/* 月票視窗間距壓縮 (只限 #subsContent，活動詳情不受影響) */
#subsContent .ev-body{padding:2px 10px 10px !important;}
#subsContent .vp-sec{margin:10px 4px 4px;}
#subsContent .vp-sec:first-child{margin-top:8px;}
#subsContent .evd-rows{margin-top:0; padding:2px 12px !important;}
#subsContent .evd-row{padding:6px 0;}
#subsContent .evd-foot{margin:8px 4px 0;}
#subsContent .vp-plan{margin-top:6px;}
#subsContent .vp-cmp{margin-top:8px;}
#subsContent .vp-cmp{animation:vpIn .25s ease-out;}
@keyframes vpIn{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}
/* 月票方案選取：與首頁選單相同的發光細條 (x50-sel-glow)，不用圓點與粉紅外框 */
#subsContent .vp-plan{position:relative; overflow:visible;}
#subsContent .vp-plan .vp-radio{display:none;}
#subsContent .vp-plan::after{content:""; position:absolute; left:14%; right:14%; bottom:0; height:.6px; border-radius:1px; pointer-events:none; opacity:0;
    --x50-glow-c: var(--x50-glow-light, #ffe08a);
    background:linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--x50-glow-c) 35%, transparent) 15%, var(--x50-glow-c) 35%, var(--x50-glow-c) 65%, color-mix(in srgb, var(--x50-glow-c) 35%, transparent) 85%, transparent 100%);
    filter:drop-shadow(0 .6px .6px rgba(0,0,0,.35)) drop-shadow(0 -.5px 1.5px var(--x50-glow-c)) drop-shadow(0 -1px 2.5px var(--x50-glow-c)) drop-shadow(0 -1.5px 4px var(--x50-glow-c));
    transform:scaleX(.6); transition:opacity .2s ease, transform .3s cubic-bezier(.2,.8,.2,1);}
#subsContent .vp-plan.is-on::after{opacity:1; transform:scaleX(1);}
/* 選方案是重點操作：會員關閉發光效果 (x50-glow-off) 時這條仍然顯示 */

/* 月票自動續訂 (subs.js)：開關、提示、月票管理、續訂通知 */
.vp-sw{margin-left:auto;}
.vp-hint{margin:6px 6px 0; font-size:11.5px; line-height:1.6; color:var(--ts-gray-500);}
.vp-hint.vp-bad{color:var(--ts-negative-500);}
.vp-bad{color:var(--ts-negative-500) !important;}
.vp-neg{color:var(--ts-negative-500) !important;}
.vp-btns{display:flex; gap:8px; margin-top:8px;} .vp-btns .ts-button{flex:1;}
.vp-log{font-size:12px; color:var(--ts-gray-600); line-height:1.8; margin:2px 6px 0;}
.vp-log span{float:right; color:var(--ts-gray-800); font-weight:600;}
.vp-res-h{text-align:center; margin-top:2px;}
.vp-res-ico{width:52px; height:52px; margin:0 auto 6px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; background:color-mix(in srgb,var(--ts-gray-300) 40%,transparent); color:var(--ts-gray-700);}
.vp-res-ico.is-bad{color:var(--ts-negative-500);}
.vp-res-t{font-weight:800; font-size:17px; color:var(--ts-gray-900);} .vp-res-s{margin-top:2px; font-size:12.5px; color:var(--ts-gray-500);}
.vp-notice .ev-body{padding:2px 10px 10px !important;}
.vp-notice .evd-rows{margin-top:8px; padding:2px 12px !important;} .vp-notice .evd-row{padding:6px 0;}
.vp-notice .evd-foot{margin:8px 4px 0;}
.vp-head{display:flex; justify-content:space-between; align-items:center;}
.vp-home-link{cursor:pointer; text-decoration:underline; text-underline-offset:3px;}
/* 首頁月票日期：可點 (打開月票訂閱設定) */
.vp-date-link{cursor:pointer; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;}

/* 介面文字不能選取 (手機上點按鈕時會誤選文字)；輸入框與可編輯區域照常可選取、複製貼上 */
html, body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, select, [contenteditable], [contenteditable] * { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

/* ---------- 會員中心 (user.js goUser) / 紀錄頁 (log.js)：統一間距 邊距 14 / 卡片內距 16 / 間隔 10 ---------- */
.uc{--uc-gut:14px; --uc-pad:16px; --uc-gap:10px;}
/* 與首頁相同：使用者卡直接接在上方點數列下面 (58px)，背景圖墊在後面 */
.uc{position:relative;}
.uc-hero{position:absolute; top:0; left:0; right:0; height:237px; background-position:center top; background-size:cover; -webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent); mask-image:linear-gradient(to bottom,#000 60%,transparent);}
.uc-wrap{padding:58px var(--uc-gut) 24px; position:relative;}
.uc-wrap > .uc-me ~ *{margin-left:10px; margin-right:10px;}
.uc-logpage .uc-wrap{margin-top:0; padding-top:10px;}
.uc-pt{font-size:20px; font-weight:800; padding:4px var(--uc-pad) 12px;}
.uc-card{ padding:0 !important; overflow:hidden; position:relative;}
.uc-sec{margin:20px 0 8px; padding-left:var(--uc-pad); font-size:12px; font-weight:700; color:var(--ts-gray-500); letter-spacing:.03em;}
.uc-sec2{display:flex; justify-content:space-between; align-items:baseline; padding-right:4px;}
.uc-sec2 small{font-weight:400; color:var(--ts-gray-400); margin-left:4px;}
.uc-editq{font-size:12.5px; font-weight:700; color:var(--ts-primary-500); cursor:pointer;}
.uc-me{overflow:visible !important;} /* 外觀用標準 .glass，不另外覆寫背景 */
.uc-me-top{display:flex; align-items:center; gap:14px; padding:var(--uc-pad);}
.uc-ava{flex:0 0 auto; text-align:center;}
.uc-me-info{flex:1; min-width:0; filter:drop-shadow(0 0 3px color-mix(in srgb, var(--c-bg) 60%, transparent)); display:flex; flex-direction:column; justify-content:center; align-self:stretch;}
.uc-me-n{font-weight:800; font-size:17px; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.uc-me-nr{display:flex; align-items:center; gap:6px; min-width:0;}
.uc-me-nr .uc-me-n{min-width:0;}
.uc-idc{flex:0 0 auto; font-size:10.5px !important; padding:0 7px !important; line-height:1.6 !important; min-height:0 !important;}
.uc-me-e{font-size:12px; line-height:1.4; color:var(--ts-gray-900); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.uc-reg{flex:0 0 auto; align-self:center; text-align:right; position:relative;}
.uc-reg-l{font-size:11px; color:var(--ts-gray-500); margin-bottom:4px;}
.uc-regbtn{display:inline-flex; align-items:center; gap:6px; font-weight:700; padding:0 14px;}
.uc-regbtn .ts-icon{font-size:9px; opacity:.6;}
.x50-menu.uc-regmenu{position:absolute; right:0; top:calc(100% + 6px); text-align:left;}
.uc-ico{flex:0 0 18px; width:18px; text-align:center; font-size:14px !important; color:var(--ts-gray-500);}
.uc-row{display:flex; align-items:center; gap:12px; padding:12px var(--uc-pad); font-size:14px; cursor:pointer;}
.uc-row + .uc-row, .uc-line{box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ts-gray-300) 45%, transparent);}
.uc-me-top + .uc-line{box-shadow:none;} /* 使用者資訊與「變更個人資料」之間不畫線 */
.uc-r{margin-left:auto; font-size:12px; color:var(--ts-gray-500); display:flex; align-items:center; gap:6px; white-space:nowrap; min-width:0;}
.uc-r .ts-icon{font-size:10px; color:var(--ts-gray-400);}
.uc-head{font-weight:700;}
.uc-chev{transition:transform .2s ease;} .uc-chev.is-open{transform:rotate(90deg);}
.uc-outcard{margin-top:24px;}
.uc-out{color:var(--ts-negative-500); font-weight:700;} .uc-out .uc-ico{color:var(--ts-negative-500);}
.uc-sub{background:color-mix(in srgb, var(--ts-gray-300) 14%, transparent);}
.uc-sub[hidden]{display:none;}
.uc-sub .uc-row{font-size:13.5px;}
.uc-sub .uc-r span:first-child{overflow:hidden; text-overflow:ellipsis; max-width:11rem;}
.uc-keys{display:grid; grid-template-columns:1fr 1fr; gap:var(--uc-gap);}
.uc-key{padding:var(--uc-pad) !important; position:relative; overflow:hidden; cursor:pointer; min-height:84px;}
.uc-key .uc-ico{display:block; text-align:left;}
.uc-kt{font-weight:700; font-size:16px; line-height:1.4; position:relative; z-index:1;}
.uc-ks{margin-top:4px; font-size:12px; font-weight:400; color:var(--ts-gray-500); min-height:1.2em; position:relative; z-index:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.uc-kt{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.uc-ks b{font-weight:inherit; color:inherit;}
/* 常用卡右下角沿圓角的短發光弧：顏色跟隨外觀設定的首頁發光條 (關閉時不顯示) */
/* 常用卡的 symbol：較小、貼在右下角 (右邊與下邊被卡片切掉一點)，不要懸空 */
.uc-key .symbol{position:absolute; inset:0; overflow:hidden; border-radius:inherit; pointer-events:none;}
.uc-key .symbol .ts-icon{font-size:3.4rem; width:auto; height:auto; line-height:1; right:-.3rem; bottom:-.75rem; opacity:.08;}
/* 圓弧沿底邊長、往上短 */
.uc-key::after{content:""; position:absolute; right:0; bottom:0; width:4.6rem; height:1.7rem; pointer-events:none; box-sizing:border-box;
    --g: var(--x50-glow-light, #ffe08a);
    border-right:1px solid var(--g); border-bottom:1px solid var(--g); border-bottom-right-radius:inherit;
    -webkit-mask-image:radial-gradient(ellipse 100% 100% at 100% 100%, #000 0, #000 35%, transparent 90%); mask-image:radial-gradient(ellipse 100% 100% at 100% 100%, #000 0, #000 35%, transparent 90%);
    opacity:.55; filter:drop-shadow(0 0 1px var(--g)) drop-shadow(0 0 2.5px color-mix(in srgb, var(--g) 50%, transparent));}
html.is-dark .uc-key::after{--g: var(--x50-glow-dark, var(--x50-glow-light, #ffd25c));}
@media (prefers-color-scheme: dark){ html:not(.is-light) .uc-key::after{--g: var(--x50-glow-dark, var(--x50-glow-light, #ffd25c));} }
html.x50-glow-off .uc-key::after{display:none;}
.uc-kx, .uc-kadd{width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; line-height:1;}
.uc-kx{position:absolute; top:10px; right:10px; z-index:1; color:var(--ts-gray-700); background:color-mix(in srgb, var(--ts-gray-300) 45%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ts-gray-400) 30%, transparent);}
.uc-kadd{font-size:14px; color:var(--ts-primary-500); background:color-mix(in srgb, var(--ts-primary-500) 10%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ts-primary-500) 30%, transparent);}
.uc-kx.is-dis, .uc-kadd.is-dis{opacity:.35;}
/* 紀錄頁 */
.uc-m{min-width:0;} .uc-m small{color:var(--ts-gray-500); font-weight:400;}
.uc-ms{font-size:11.5px; color:var(--ts-gray-500); margin-top:1px;}
.uc-amt{font-weight:700; color:var(--ts-gray-900); font-size:14px;} .uc-amt small{font-weight:400; color:var(--ts-warning-600);}
.uc-amt.is-tic{font-weight:600; color:var(--ts-gray-600); font-size:12.5px;}
.uc-sum{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; text-align:center; padding:var(--uc-pad) 0 !important;}
.uc-sum span{display:block; font-size:11.5px; color:var(--ts-gray-500);} .uc-sum b{display:block; margin-top:2px; font-size:18px; color:var(--ts-gray-900);}
.uc-sum > div + div{box-shadow:inset 1px 0 0 color-mix(in srgb, var(--ts-gray-300) 45%, transparent);}
.uc-empty{margin-top:20px; text-align:center; font-size:13px; color:var(--ts-gray-500);}

/* 共用玻璃下拉選單 (與養成商城的篩選 / 排序選單相同) */
.x50-menu{position:fixed; z-index:1000; min-width:11rem; padding:6px; display:flex; flex-direction:column; gap:2px;}
.x50-menu.glass{background-color:color-mix(in srgb, var(--ts-gray-50) 78%, transparent) !important; backdrop-filter:blur(18px) saturate(1.6); -webkit-backdrop-filter:blur(18px) saturate(1.6);}
.x50-menu[hidden]{display:none;}
.x50-menu button{display:flex; align-items:center; gap:10px; width:100%; padding:8px 12px; border-radius:.8rem; text-align:left; font-size:.9rem; color:var(--ts-gray-800);}
.x50-menu button:hover{background:color-mix(in srgb, var(--ts-gray-400) 20%, transparent);}
.x50-menu button .ts-icon{width:1rem; opacity:.7;}
.x50-menu button small{margin-left:auto; color:var(--ts-gray-500);}
.x50-menu button.is-on{color:var(--ts-primary-600); font-weight:600;} .x50-menu button.is-on .ts-icon{opacity:1;}

/* 外觀設定：手機預覽 / 色票 / 側列切換 (選到的用首頁同款發光細條) */
.ap-box{padding:4px 12px 14px !important; margin-top:12px;}
.ap-sec{margin:12px 4px 4px; font-size:12px; font-weight:700; color:var(--ts-gray-500);}
.ap-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 4px; font-size:13px;}
.ap-phones{display:flex; justify-content:space-around; padding:6px 0 2px;}
.ap-ph{position:relative; display:flex; flex-direction:column; align-items:center;}
.ap-ph{cursor:pointer;}
.ap-chk{position:absolute; left:50%; bottom:12px; transform:translateX(-50%); width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; color:transparent; background:color-mix(in srgb, var(--ts-gray-300) 85%, transparent); box-shadow:0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.2);}
.ap-ph.is-on .ap-chk{background:var(--ts-primary-500); color:#fff;}
.ap-opts{display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; padding:4px;}
.ap-sws{display:flex; justify-content:space-between; padding:6px 2px 2px;}
.ap-sw{position:relative; width:56px; padding:0; margin:0; border:0; background:none; line-height:1.4; display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer;}
.ap-sw i{width:30px; height:30px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.1);}
.ap-sw i.is-auto{display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--ts-gray-700); background:var(--ts-gray-100);}
.ap-sw span{font-size:12px; line-height:1.4; color:var(--ts-gray-600);}
.ap-sw.is-on i{box-shadow:0 0 0 2px var(--ts-gray-50), 0 0 0 4px var(--ts-gray-800);}
.ap-sw.is-on span{color:var(--ts-gray-900); font-weight:700;}
.ap-sw input[type=color]{position:absolute; inset:0; opacity:0; cursor:pointer;}
.ap-sys{display:flex; justify-content:center; padding:14px 0 2px;}
.ap-hint{margin:10px 4px 0; font-size:11px; color:var(--ts-gray-500);}
/* 顯示模式預覽：首頁縮圖 (背景、頭貼、集點卡、養成角色、活動、導覽列) */
.mph{display:block; width:110px; height:208px; border-radius:18px; overflow:hidden; background:var(--pg); box-shadow:0 0 0 2px var(--fr), 0 6px 14px rgba(0,0,0,.12);
     --pg:#e8e8e9; --card:rgba(255,255,255,.78); --line:#d2d3d8; --fr:#d0d1d6;}
.mph.D{--pg:#1b1b1d; --card:rgba(46,46,50,.82); --line:#45454c; --fr:#3a3a40;}
.mph i, .mph b, .mph u, .mph img{display:block; position:absolute;}
.mph .bg{left:0; right:0; top:0; height:96px; background:right center/cover no-repeat;}
.mph .av{left:8px; top:20px; width:20px; height:20px; border-radius:50%; background:center/cover no-repeat #ccc; box-shadow:0 0 0 1px rgba(255,255,255,.8);}
.mph .nm{left:33px; top:24px; width:36px; height:4px; border-radius:2px; background:#fff; box-shadow:0 0 2px rgba(0,0,0,.5);}
.mph .nm2{left:33px; top:32px; width:24px; height:3px; border-radius:2px; background:#fff; box-shadow:0 0 2px rgba(0,0,0,.5);}
.mph .st{left:6px; right:6px; top:58px; height:28px; border-radius:7px; background:var(--card);}
.mph .gr{left:6px; right:6px; top:92px; height:62px; border-radius:7px; background:var(--card); overflow:hidden;}
.mph .gr .p{left:8px; right:8px; height:3px; border-radius:2px; background:var(--line); overflow:hidden;}
.mph .gr .p u{left:0; top:0; bottom:0;}
.mph .gr .p1{top:16px;} .mph .gr .p1 u{background:#ff9bad;}
.mph .gr .p2{top:28px;} .mph .gr .p3{top:40px;} .mph .gr .p2 u, .mph .gr .p3 u{background:#ffde9b;}
.mph .ev{left:6px; right:6px; top:160px; height:20px; border-radius:7px; background:var(--card);}
.mph .mb{left:12px; right:12px; bottom:6px; height:16px; border-radius:9px; background:var(--card); box-shadow:0 1px 4px rgba(0,0,0,.15);}

/* 集點兌換憑證 (proof.js)：補填遊戲卡號 + 卡片照片 */
.pf-tag{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:var(--ts-negative-500); line-height:1.6;}
.pf-gift{display:flex; align-items:center; gap:12px; margin-top:10px;}
.pf-gift img{width:46px; height:46px; object-fit:cover; border-radius:10px; flex:0 0 auto; background:#fff;}
.pf-gn{font-weight:700; font-size:14px; line-height:1.4; min-width:0;}
.pf-modal .vp-sec{margin:14px 4px 6px;}
.pf-pick{display:flex !important; align-items:center; justify-content:center; min-height:110px; padding:0 !important; cursor:pointer; overflow:hidden;}
.pf-ph{display:flex; flex-direction:column; align-items:center; gap:6px; font-size:12.5px; color:var(--ts-gray-500);}
.pf-ph .ts-icon{font-size:22px;}
.pf-pick img{display:block; width:100%; max-height:220px; object-fit:contain;}
.pf-modal .vp-chk{padding-left:4px; margin-top:6px;}
.pf-pick [hidden]{display:none !important;}

/* 會員中心使用者卡：文字跟「選擇店鋪」頁首 (.grow-text) 一樣，固定白字 + 黑色光暈，不跟亮暗模式反色 */
.uc-me .uc-me-info{filter:none;}
/* 展開的「變更個人資料」列表 (.uc-sub) 在背景圖下方，維持一般卡片列表的字色，不套白字與光暈 (光暈會把每列的分隔線暈成灰帶) */
.uc-me :is(.uc-me-n, .uc-row, .uc-ico, .uc-r, .uc-r .ts-icon):not(.uc-sub, .uc-sub *){color:white !important;}
.uc-me .uc-me-e{color:rgba(255,255,255,0.9) !important;}
.uc-me :is(.uc-me-n, .uc-me-e, .uc-row):not(.uc-sub *){filter:drop-shadow(0 0 2.5px rgb(0,0,0));}
/* 集點活動：暫停集點提示 (ts-notice + glass，放在點數卡下方) */
.ts-notice.coupon-pause{display:flex; align-items:center; gap:12px; margin:12px 0 0; padding:12px 14px; border:none; text-align:left; color:inherit;}
.coupon-pause .cp-ic{flex:none; font-size:22px; line-height:1; opacity:.8;}
/* 機種頁：排隊平板的機種維護中 (game.js)；告示同集點暫停，放在台號上方 */
.ts-notice.pad-maint-note{margin:0 0 12px;}
.ts-notice.coupon-pause .title{display:block; margin:0; padding:0; background:none !important; color:inherit; font-size:14px; font-weight:700; line-height:1.45;}
.ts-notice.coupon-pause .content{color:inherit; font-size:13px; line-height:1.55; font-variant-numeric:tabular-nums;}

/* 註冊：會員 / 隱私條款 (#termsmodal，與會員中心「平板設定」同樣式：modalglass + 實色 ts-box 內容 + glass x50-red 按鈕；內容是資料庫的 HTML，捲到最後才能同意) */
#termsmodal .terms-box { margin: 8px 0; overflow: hidden; }
#termsmodal .terms-note:empty { display: none; }
#termsmodal .terms-note { margin-bottom: 8px; font-size: 12px; color: var(--ts-gray-500); }
#termsmodal .terms-body { padding: 16px; max-height: min(58vh, 500px); overflow: auto; font-size: 13.5px; line-height: 1.75; overscroll-behavior: contain; scrollbar-width: none; }
#termsmodal .terms-body::-webkit-scrollbar { display: none; }
#termsmodal .terms-body h4 { font-size: 15px; font-weight: 700; margin: 0 0 8px; }
#termsmodal .terms-body h5 { font-size: 14px; font-weight: 700; margin: 14px 0 4px; }
#termsmodal .terms-body p { margin: 0 0 8px; }
.reg-terms-link { text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* 會員中心紀錄頁 (logview.js)：摘要 + 依日期分組的 basicglass 卡片；回饋點數每筆一張卡 */
.lg { display: flex; flex-direction: column; gap: 8px; }
.lg-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); padding: 14px 6px !important; text-align: center; }
.lg-stat + .lg-stat { box-shadow: inset 1px 0 0 color-mix(in srgb, var(--ts-gray-300) 45%, transparent); }
.lg-stat-v { font-size: 20px; font-weight: 800; line-height: 1.2; }
.lg-stat-v small { font-size: 12px; font-weight: 600; margin-left: 2px; opacity: .6; }
.lg-stat-k { font-size: 11.5px; color: var(--ts-gray-500); margin-top: 2px; }
.lg-range { font-size: 11px; color: var(--ts-gray-500); text-align: right; margin: -2px 4px 0; }
.lg-day { font-size: 12px; font-weight: 700; color: var(--ts-gray-500); letter-spacing: .03em; margin: 10px 6px 0; }
.lg-card { padding: 0 !important; overflow: hidden; }
.lg-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; }
.lg-row + .lg-row { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ts-gray-300) 45%, transparent); }
.lg-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ts-gray-300) 22%, transparent); }
.lg-ico img { width: 30px; height: 30px; object-fit: contain; filter: invert(.5); }
.lg-ico .ts-icon { font-size: 17px; color: var(--ts-gray-600); }
.lg-ico.is-fp .ts-icon { color: #e0a100; }
.lg-main { flex: 1; min-width: 0; }
.lg-title { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-title .lg-cab { font-weight: 500; font-size: 12.5px; color: var(--ts-gray-500); margin-left: 4px; }
.lg-sub { font-size: 12px; color: var(--ts-gray-500); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-sub .ts-icon { font-size: 11px; }
.lg-amt { flex: none; text-align: right; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lg-amt small { display: block; font-size: 11px; font-weight: 500; color: var(--ts-gray-500); }
.lg-amt.is-in { color: var(--x50-accent); }
.lg-p { font-size: 11px; font-weight: 700; margin-left: 1px; opacity: .7; }
.lg-fp { padding: 12px 14px !important; }
.lg-fp-top { display: flex; align-items: center; gap: 12px; }
.lg-badge { flex: none; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 99px; background: color-mix(in srgb, var(--ts-gray-300) 25%, transparent); color: var(--ts-gray-600); }
.lg-fp.is-soon .lg-badge { background: color-mix(in srgb, var(--x50-accent) 14%, transparent); color: var(--x50-accent); }
.lg-bar { height: 4px; border-radius: 99px; margin: 12px 0 8px; background: color-mix(in srgb, var(--ts-gray-300) 35%, transparent); overflow: hidden; }
.lg-bar i { display: block; height: 100%; border-radius: inherit; background: #e0a100; box-shadow: 0 0 6px color-mix(in srgb, #e0a100 60%, transparent); }
.lg-fp.is-soon .lg-bar i { background: var(--x50-accent); box-shadow: 0 0 6px color-mix(in srgb, var(--x50-accent) 60%, transparent); }
.lg-fp-foot { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--ts-gray-500); }
.lg-fp-foot b { font-size: 15px; color: var(--ts-gray-800); }
.lg-fp.is-dead { opacity: .55; }
.lg-fp.is-dead .lg-bar i { background: var(--ts-gray-400); box-shadow: none; }
.lg-empty { padding: 28px 16px !important; text-align: center; color: var(--ts-gray-500); font-size: 13px; }
.lg-empty .ts-icon { font-size: 26px; display: block; margin: 0 auto 8px; opacity: .6; }
.lg-bar.is-tic i { background: var(--ts-gray-500); box-shadow: none; }

/* 機種頁排隊確認框裡的選台 (#padmodal #ppInline)：與投幣相同的台號卡片 (複製機台頁)，選中粉色框 */
#padmodal .pp-box { padding: 14px !important; margin: 8px 0 !important; }
#padmodal .pp-label { font-size: 12px; font-weight: 700; color: var(--ts-gray-500); margin-bottom: 10px; }
#padmodal .pp-cabs { max-height: 46vh; overflow-y: auto; }
#padmodal .pp-cabs .ts-divider { margin: 10px 0 !important; }
#padmodal .pp-cabcard { cursor: pointer; border-radius: 0.9rem !important; box-shadow: 0px 0.4px 2.5px 0 #00000024; transition: box-shadow .15s, color .15s; }
#padmodal .pp-cabcard.is-any { margin-bottom: 4px; }
#padmodal .pp-cabcard.is-any .pp-any { font-size: 14px !important; transform: none !important; color: inherit !important; padding: 10px 0; font-weight: 600; }
#padmodal .pp-cabcard.is-on { box-shadow: inset 0 0 0 2px var(--x50-accent), 0 0 10px color-mix(in srgb, var(--x50-accent) 25%, transparent); }
#padmodal .pp-cabcard.is-on .header, #padmodal .pp-cabcard.is-on .pp-any { color: var(--x50-accent) !important; }
#padmodal .pp-cabcard.is-dis { opacity: .35; pointer-events: none; }
#padmodal .pp-cabgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* 深色模式：所有紅色 (Tocas negative、x50-red、行內 color:red、讀取圈) 改用 Tocas 黃 (含 x50-heart 兌換 / 養成箱按鈕；首頁與等級的愛心圖示不動)；淺色完全不變。Global Menu 不動 */
@media (prefers-color-scheme: dark) {
html:not(.is-light) {
    --ts-negative-400: var(--ts-warning-400);
    --ts-negative-500: var(--ts-warning-500);
    --ts-negative-600: var(--ts-warning-500);
    --ts-negative-700: var(--ts-warning-500);
    /* 深色下原本用 600 / 700 的黃色一律改 500 */
    --ts-warning-600: var(--ts-warning-500);
    --ts-warning-700: var(--ts-warning-500);
}
html:not(.is-light) .x50-red,
html:not(.is-light) [style*="color:red"],
html:not(.is-light) [style*="color: red"],
html:not(.is-light) .x50-heart { color: var(--ts-warning-500) !important; }
html:not(.is-light) .x50-sb-spin { border-color: color-mix(in srgb, var(--ts-warning-500) 18%, transparent); border-top-color: var(--ts-warning-500); }
html:not(.is-light) :is(.ts-button, .ts-badge).is-negative:not(.is-outlined) { color: #1b1b1d; }
html:not(.is-light) #padmodal .pp-cabcard.is-on, html:not(.is-light) .pp-cab:has(input:checked) { box-shadow: inset 0 0 0 1px var(--x50-accent), 0 0 4px color-mix(in srgb, var(--x50-accent) 22%, transparent) !important; }
html:not(.is-light) .lot-window { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--x50-accent) 55%, transparent); }
html:not(.is-light) .lot-win .lot-window { animation-name: lotGlowThin; }
}
html.is-dark {
    --ts-negative-400: var(--ts-warning-400);
    --ts-negative-500: var(--ts-warning-500);
    --ts-negative-600: var(--ts-warning-500);
    --ts-negative-700: var(--ts-warning-500);
    /* 深色下原本用 600 / 700 的黃色一律改 500 */
    --ts-warning-600: var(--ts-warning-500);
    --ts-warning-700: var(--ts-warning-500);
}
html.is-dark .x50-red,
html.is-dark [style*="color:red"],
html.is-dark [style*="color: red"],
html.is-dark .x50-heart { color: var(--ts-warning-500) !important; }
html.is-dark .x50-sb-spin { border-color: color-mix(in srgb, var(--ts-warning-500) 18%, transparent); border-top-color: var(--ts-warning-500); }
html.is-dark :is(.ts-button, .ts-badge).is-negative:not(.is-outlined) { color: #1b1b1d; }
html.is-dark #padmodal .pp-cabcard.is-on, html.is-dark .pp-cab:has(input:checked) { box-shadow: inset 0 0 0 1px var(--x50-accent), 0 0 4px color-mix(in srgb, var(--x50-accent) 22%, transparent) !important; }
html.is-dark .lot-window { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--x50-accent) 55%, transparent); }
html.is-dark .lot-win .lot-window { animation-name: lotGlowThin; }
/* 深色模式的黃色選取環：細線 + 小光暈 */
@keyframes lotGlowThin{50%{box-shadow:inset 0 0 0 1px var(--x50-accent), 0 0 6px color-mix(in srgb, var(--x50-accent) 25%, transparent);}}

/* 一般版面 (非側列)：底部選單維持五個圖示；右上角不再用膠囊疊玻璃，
   語系 / 點數與設定 (首頁齒輪、其他頁頭像) 各自是獨立的玻璃按鈕，設定在最右側 (同 Fold 拆開的做法) */
@media (not ((pointer: coarse) and (orientation: landscape))) and (not ((pointer: coarse) and (min-aspect-ratio: 3/5) and (min-width: 420px) and (max-width: 599px))) {
    body:has(.x50-menubar) #navbar {
        gap: 8px;
        align-items: center;
    }
    body:has(.x50-menubar) .x50-navright {
        margin-left: auto;
    }
    body:has(.x50-menubar) #navbar > .x50-navgroup > .x50-navtext {
        margin-left: auto !important;
    }
    body:has(.x50-menubar) .x50-navgroup {
        display: contents !important;
    }
    body:has(.x50-menubar) .x50-navgroup > a {
        display: none !important;
    }
    body:has(.x50-menubar) .x50-navtext {
        margin-right: 0 !important;
    }
    body:has(.x50-menubar) .x50-navtext select {
        background: transparent !important;
    }
    /* 點數膠囊：與右側頭像同高 (38px)，文字上下左右置中 */
    body:has(.x50-menubar) .x50-navtext.ts-button {
        height: 38px !important;
        padding: 0 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        vertical-align: middle !important;
    }
    body:has(.x50-menubar) .x50-navuser {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 38px;
        height: 38px;
        border-radius: 50px;
    }
    body:has(.x50-menubar) .x50-navuser .ts-avatar {
        width: 33px !important;
        height: 33px !important;
    }
}

/* 介面設定分頁 + 背景設定 (兩欄大卡片，勾選＝目前背景，區塊內捲動) */
.ap-tabs{margin:12px 0 0;}
.apbgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; padding:8px 0 4px;}
.apbgrid > .ap-hint{grid-column:1 / -1;}
.apbg2{position:relative; height:190px; border-radius:14px; overflow:hidden; background:var(--ts-gray-200); cursor:pointer; isolation:isolate;}
.apbg2 img{position:absolute; top:0; right:0; height:100%; width:166.66%; max-width:none; object-fit:cover;}
.apbg2 .apbg-name{color:rgb(33,33,33); font-weight:500; font-size:11px; padding:4px 8px; border-radius:50px; height:auto; white-space:normal;}
.apbg2.is-on{box-shadow:0 0 0 2px var(--ts-gray-50), 0 0 0 4px var(--ts-gray-800);}
.apbg2 > i{position:absolute; top:8px; right:8px; z-index:2; width:22px; height:22px; border-radius:50%; background:var(--ts-primary-500); color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center;}

/* 所有彈窗：只限制內容區 (彈窗裡的實色 ts-box) 的高度，內容在框內捲動；標題、關閉、分頁、按鈕維持在外面不動 */
.ts-modal .modalglass > .ts-box, .ts-modal .modalglass > div > .ts-box {
    max-height: calc(100dvh - 220px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}
.ts-modal .modalglass > .ts-box::-webkit-scrollbar, .ts-modal .modalglass > div > .ts-box::-webkit-scrollbar {
    display: none;
}
/* 實色內容框裡的玻璃分段選單：文字用一般前景色 (玻璃預設是給背景圖上用的白字陰影) */
.ap-box .ts-tab.glass .item, .ap-box .ts-tab.glass.x50-sel-glow .item.is-active {
    color: var(--ts-gray-900) !important;
    text-shadow: none !important;
}
.ap-box .ts-tab.glass.x50-sel-glow .item.is-active {
    font-weight: 700;
}

/* ---- 投幣結果 (付款資訊，game.js showPayResult)：上方付款卡片 + 下方小卡 ---- */
@keyframes prsheen { 100% { transform: rotateZ(60deg) translate(1em, -90em); opacity:0; } }
.pr{padding:4px 18px!important;margin-top:12px;position:relative;overflow:hidden}
.pr.pr-sheen{margin-top:4px}
.pr-sheen::after{content:"";position:absolute;top:-50%;right:-50%;bottom:-50%;left:-215%;background-color:var(--c-glass);pointer-events:none;
  transform:rotateZ(60deg) translate(-5em, 7.5em);animation:prsheen cubic-bezier(.5,-0.25,.75,1) 2s 1 forwards}
.pr-sec{padding:14px 0}
.pr-sec + .pr-sec{border-top:1px solid color-mix(in srgb,var(--ts-gray-300) 60%,transparent)}
.pr-head{display:flex;align-items:center;gap:.75rem}
.pr-ok{width:2.5rem;height:2.5rem;border-radius:50%!important;display:flex;align-items:center;justify-content:center;flex:none;font-size:1.1rem}
.pr-ok .ts-icon{color:var(--ts-positive-500)}
.pr-title{font-weight:600;font-size:1.02rem;line-height:1.25}
.pr-sub{color:var(--ts-gray-500);font-size:.82rem;margin-top:1px}
.pr-pay{margin-left:auto;text-align:right;line-height:1}
.pr-pay .v{font-size:1.65rem;font-weight:600;letter-spacing:-.01em}
.pr-pay .u{font-size:.8rem;color:var(--ts-gray-500);margin-left:2px}
.pr-pay .k{display:block;font-size:.72rem;color:var(--ts-gray-500);margin-bottom:4px}
.pr-row{display:flex;justify-content:space-between;align-items:baseline;font-size:.9rem}
.pr-row .k{color:var(--ts-gray-500)}
.pr-row .from{color:var(--ts-gray-500)}
.pr-row .arr{color:var(--ts-gray-400);margin:0 .35rem;font-size:.8em}
.pr-row b{font-weight:600}
.pr-label{display:flex;justify-content:space-between;align-items:baseline}
.pr-label .k{color:var(--ts-gray-500)}
.pr-label .k .ts-icon{color:#ff1100bf;margin-right:2px}
.pr-label .up{font-weight:600;margin-left:4px;color:var(--ts-gray-800)}
.pr-gbar .evd-dtrack i{left:0;background:var(--x50-accent);box-shadow:0 0 4px var(--x50-accent),0 0 9px color-mix(in srgb,var(--x50-accent) 70%,transparent)}
.pr-info{padding:2px 14px!important;margin-top:8px}
.pr-info .pr-sec{padding:9px 0}
.pr-info .pr-label{font-size:.8rem;margin-bottom:6px}
.pr-info .evd-days-head{font-size:.8rem;margin-bottom:6px}
.pr-info .evd-psub{font-size:.75rem}
.pr-cc{display:flex;align-items:center;gap:8px}
.pr-ccimg{width:52px;height:26px;flex:none;border-radius:.4rem;background-size:cover;background-position:center}
.pr-cc .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.78rem;font-weight:600}
.pr-cc .s{display:flex;align-items:center;gap:.35rem;font-size:.75rem;color:var(--ts-gray-500);white-space:nowrap}
.pr-cc .s b{color:var(--ts-gray-800);font-weight:600}
.pr-btn{margin-top:12px;width:100%}

/* ---- 生物識別登入 (Passkey) 設定：已綁定裝置列表 (static/js/passkey.js) ---- */
.pk-list .pk-item { display:flex; align-items:center; gap:12px; padding:10px 0; }
.pk-list .pk-item + .pk-item { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ts-gray-300) 45%, transparent); }
.pk-list .pk-ico { flex:0 0 18px; text-align:center; color:var(--ts-gray-500); }
.pk-list .pk-txt { flex:1; min-width:0; }
.pk-list .pk-name { font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pk-list .pk-name small { font-weight:400; color:var(--ts-gray-500); margin-left:6px; }
.pk-list .pk-sub { font-size:12px; color:var(--ts-gray-500); }
.pk-list .pk-del { flex:0 0 auto; font-size:13px; font-weight:700; cursor:pointer; }
.pk-list .pk-empty { font-size:13px; color:var(--ts-gray-500); padding:4px 0; }
/* 登入裝置 (static/js/sessions.js)：「目前裝置」標籤 */
.pk-list .ss-cur { font-size:11px; font-weight:700; margin-left:6px; padding:1px 7px; border-radius:1rem; color:white; background:var(--ts-positive-500); vertical-align:1px; }

/* ==== Web 光效 (2026-11-08)：選取外框、觸控光效、發光線；數字與 Android App (README「選取外框 / 觸控光效 / 發光線」) 相同 ==== */
/* 主題參數：外框 (左上 / 中段 / 右下 / 內側高光)、觸控光、發光線核心提亮與底緣溢光 */
:root{
    --rim-a: .85; --rim-b: .22; --rim-c: .45; --rim-i: .28; --rim-dk: .10; --rim-out: .14;
    --tl-soft: rgba(255,255,255,.55); --tl-edge: rgba(255,196,107,.60); --tl-blend: normal;
    --glow-core: 35%; --glow-bleed: 20%; --glow-blend: normal;
}
@media (prefers-color-scheme: dark){
    html:not(.is-light){
        --rim-a: .50; --rim-b: .10; --rim-c: .26; --rim-i: .12; --rim-dk: 0; --rim-out: 0;
        --tl-soft: rgba(255,241,220,.20); --tl-edge: rgba(255,241,220,.60); --tl-blend: plus-lighter;
        --glow-core: 55%; --glow-bleed: 16%; --glow-blend: plus-lighter;
    }
}
html.is-dark{
    --rim-a: .50; --rim-b: .10; --rim-c: .26; --rim-i: .12; --rim-dk: 0; --rim-out: 0;
    --tl-soft: rgba(255,241,220,.20); --tl-edge: rgba(255,241,220,.60); --tl-blend: plus-lighter;
    --glow-core: 55%; --glow-bleed: 16%; --glow-blend: plus-lighter;
}

/* 深色限定 (2026-11-08：淺色在實機上光暈會糊成粉色一片，淺色維持原本的細線)。底緣往上 18px 的溢光畫在卡片本身的 background-image (橢圓，左右自然淡出)，不跟著 drop-shadow 再擴散 */
/* --- 發光線：核心往白色提亮 + 三層光暈 (σ 1.2 / 2.5 / 6px → drop-shadow 2.4 / 5 / 12px，強度 .85 / .55 / .30) + 卡片底緣往上溢光；深色用加法混合 --- */
@media (prefers-color-scheme: dark){
html:not(.is-light) .x50-glow{ background-image: radial-gradient(ellipse 68% 18px at 50% 100%, color-mix(in srgb, var(--x50-glow-c) var(--glow-bleed), transparent), transparent) !important; }
html:not(.is-light) .x50-glow::after{
    border-bottom: 1px solid color-mix(in srgb, var(--x50-glow-c), #fff var(--glow-core));
    filter: drop-shadow(0 0 2.4px color-mix(in srgb, var(--x50-glow-c) 85%, transparent)) drop-shadow(0 0 5px color-mix(in srgb, var(--x50-glow-c) 55%, transparent)) drop-shadow(0 0 12px color-mix(in srgb, var(--x50-glow-c) 30%, transparent));
    opacity: 1;
}
}
html.is-dark .x50-glow{ background-image: radial-gradient(ellipse 68% 18px at 50% 100%, color-mix(in srgb, var(--x50-glow-c) var(--glow-bleed), transparent), transparent) !important; }
html.is-dark .x50-glow::after{
    border-bottom: 1px solid color-mix(in srgb, var(--x50-glow-c), #fff var(--glow-core));
    filter: drop-shadow(0 0 2.4px color-mix(in srgb, var(--x50-glow-c) 85%, transparent)) drop-shadow(0 0 5px color-mix(in srgb, var(--x50-glow-c) 55%, transparent)) drop-shadow(0 0 12px color-mix(in srgb, var(--x50-glow-c) 30%, transparent));
    opacity: 1;
}
html.x50-glow-off .x50-glow.x50-glow{ background-image: none !important; }

/* --- 觸控光效 (shared.js x50TouchLight)：按住玻璃元件時，手指下一團柔光 + 最近邊緣的高光；
   整頁共用一個 fixed 圖層 (只在按住時顯示)，位置 / 強度用變數更新，不加 backdrop-filter、不動版面 --- */
.x50-touchfx{
    position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 98; pointer-events: none; overflow: hidden;
    opacity: 0; transition: opacity .25s ease-out; contain: layout paint style;
    mix-blend-mode: var(--tl-blend);
    background: radial-gradient(circle calc(var(--ls, 40px) * 2) at var(--lx, 50%) var(--ly, 50%), var(--tl-soft) 0, color-mix(in srgb, var(--tl-soft) 55%, transparent) 30%, color-mix(in srgb, var(--tl-soft) 18%, transparent) 60%, transparent 100%);
}
.x50-touchfx.is-on{ opacity: 1; transition: opacity .12s ease-out; }
/* 淺色：柔光改畫在元件自己的背景 (文字 / 圖示之後)，圖層只留邊緣高光 */
@media (prefers-color-scheme: light){ html:not(.is-dark) .x50-touchfx{ background: none; } }
html.is-light .x50-touchfx{ background: none; }
[data-x50lit]{
    --tl-g: radial-gradient(circle calc(var(--ls, 40px) * 2) at var(--lx, 50%) var(--ly, 50%), rgba(255,255,255, calc(.55 * var(--tl-a, 0))) 0, rgba(255,255,255, calc(.30 * var(--tl-a, 0))) 30%, rgba(255,255,255, calc(.10 * var(--tl-a, 0))) 60%, transparent 100%);
    background-image: var(--tl-g) !important;
}
/* 深色：另一層 color-dodge .30，光會帶一點後面的顏色；淺色不顯示 */
.x50-touchdg{ display: none; mix-blend-mode: color-dodge; background: radial-gradient(circle calc(var(--ls, 40px) * 2) at var(--lx, 50%) var(--ly, 50%), rgba(255,241,220,.30) 0, rgba(255,241,220,.16) 30%, rgba(255,241,220,.05) 60%, transparent 100%); }
@media (prefers-color-scheme: dark){ html:not(.is-light) .x50-touchdg{ display: block; } }
html.is-dark .x50-touchdg{ display: block; }
.x50-touchfx.is-top{ z-index: 2147483000; }
/* 邊緣高光：1.5px 的環 (遮罩只留邊)，以手指為中心的放射漸層，強度 --le (離邊 26px 內漸強、拖到外面加強) */
.x50-touchfx > i{
    position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; opacity: var(--le, 0);
    background: radial-gradient(circle calc(var(--ls, 40px) * 2.6) at var(--lx, 50%) var(--ly, 50%), var(--tl-edge) 0, color-mix(in srgb, var(--tl-edge) 40%, transparent) 45%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* ==== 細節修正 (2026-11-08) ==== */
/* 數位張貼空格：原本是 15% 的實心圓 (淺色像灰色污點)，改成與選取外框同一組細亮邊的玻璃空槽 */
.st-slot{
    --st-fill: color-mix(in srgb, var(--c-light) 35%, transparent);
    display: inline-block; width: 32px; height: 32px; margin: 5px 0; border-radius: 50%; box-sizing: border-box; vertical-align: middle;
    background: var(--st-fill);
    box-shadow: inset 0 0 0 1px rgba(255,255,255, var(--rim-b)), inset 1px 1px 0 0 rgba(255,255,255, calc(var(--rim-a) - var(--rim-b))),
        inset -1px -1px 0 0 rgba(255,255,255, calc(var(--rim-c) - var(--rim-b))), inset 0 1px 3px rgba(0,0,0,.10);
}
@media (prefers-color-scheme: dark){ html:not(.is-light) .st-slot{ --st-fill: color-mix(in srgb, var(--c-glass) 5%, transparent); } }
html.is-dark .st-slot{ --st-fill: color-mix(in srgb, var(--c-glass) 5%, transparent); }

/* 淺色：數位張貼格線與空槽再淡一些 (0mu 2026-11-08「白色下的集點卡格線有點太深」)；深色不變 */
@media (prefers-color-scheme: light){
    html:not(.is-dark) #stampv .stamp-border{ border-left-color: rgba(255,255,255,.32); }
    html:not(.is-dark) #stampv .stamp-divider{ border-top-color: rgba(255,255,255,.32); }
    html:not(.is-dark) .st-slot{ box-shadow: inset 0 0 0 1px rgba(255,255,255, var(--rim-b)), inset 1px 1px 0 0 rgba(255,255,255, calc(var(--rim-a) - var(--rim-b))), inset -1px -1px 0 0 rgba(255,255,255, calc(var(--rim-c) - var(--rim-b))), inset 0 1px 3px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.05); }
}
html.is-light #stampv .stamp-border{ border-left-color: rgba(255,255,255,.32); }
html.is-light #stampv .stamp-divider{ border-top-color: rgba(255,255,255,.32); }
html.is-light .st-slot{ box-shadow: inset 0 0 0 1px rgba(255,255,255, var(--rim-b)), inset 1px 1px 0 0 rgba(255,255,255, calc(var(--rim-a) - var(--rim-b))), inset -1px -1px 0 0 rgba(255,255,255, calc(var(--rim-c) - var(--rim-b))), inset 0 1px 3px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.05); }
/* 介面設定彈窗上方分頁 (#apTabs)：淺色時字改深色 (原本白字在淺灰玻璃上看不清)，與 .ap-box 裡的分段選單相同；深色不變 */
@media (prefers-color-scheme: light){
    html:not(.is-dark) #apTabs.ts-tab.glass .item, html:not(.is-dark) #apTabs.ts-tab.glass.x50-sel-glow .item.is-active { color: var(--ts-gray-900) !important; text-shadow: none !important; }
}
html.is-light #apTabs.ts-tab.glass .item, html.is-light #apTabs.ts-tab.glass.x50-sel-glow .item.is-active { color: var(--ts-gray-900) !important; text-shadow: none !important; }

/* ==== 首頁三張玻璃卡片的觸控光 (2026-11-08，0mu：按住才亮、從按的地方擴散、發光條跟著手指) ====
   shared.js x50Sweep 在會員資訊、數位張貼、養成卡片裡加兩個裝飾元素 (都不用 mix-blend-mode：放在有 backdrop-filter 的卡片裡會讓模糊失效)：
   .x50-bloom   按下時從手指位置往外擴散的柔光 (卡片底色之上、文字之下)，按住時跟著手指，放開淡出；
   .x50-glowrun 卡片原本發光條的亮點滑到手指的 x、沿兩側往手指的高度延伸，放開滑回中間淡出。
   位置 / 半徑是註冊過的 CSS 變數 (rAF 更新)，只在按住與淡出時重畫這張卡片；平常沒有任何動畫 */
@property --bx { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --by { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --br { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --gx { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --gh { syntax: '<length>'; inherits: false; initial-value: 0px; }
.x50-sweep-host{ isolation: isolate; }
.x50-bloom, .x50-glowrun{ position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; }
.x50-bloom{
    z-index: -1;
    background: radial-gradient(circle var(--br) at var(--bx) var(--by), var(--bl-c) 0, color-mix(in srgb, var(--bl-c) 50%, transparent) 40%, color-mix(in srgb, var(--bl-c) 15%, transparent) 70%, transparent 100%);
    transition: --br .55s cubic-bezier(.2,.7,.3,1), opacity .3s ease-out;
}
.x50-bloom.is-on{ opacity: 1; transition: --br .55s cubic-bezier(.2,.7,.3,1), opacity .12s ease-out; }
.x50-glowrun{
    z-index: 6; padding: 2px;
    --gr-c: color-mix(in srgb, var(--x50-glow-c, #ffe08a), #fff 55%);
    background:
        radial-gradient(ellipse calc(var(--gw0, 300px) * .18 + var(--gh) * .6) calc(var(--gh) * 1.1 + 12px) at var(--gx) 100%, var(--gr-c) 0, var(--gr-c) 30%, color-mix(in srgb, var(--gr-c) 70%, transparent) 60%, transparent 100%),
        radial-gradient(ellipse calc(var(--gw0, 300px) * .30 + var(--gh) * .9) calc(var(--gh) * 1.3 + 18px) at var(--gx) 100%, color-mix(in srgb, var(--gr-c) 60%, transparent) 0, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    transition: --gx .4s cubic-bezier(.2,.7,.3,1), --gh .4s cubic-bezier(.2,.7,.3,1), opacity .35s ease-out;
}
.x50-glowrun.is-on{ opacity: 1; transition: --gx .16s ease-out, --gh .16s ease-out, opacity .12s ease-out; }
html.x50-glow-off .x50-glowrun{ display: none; }
:root{ --bl-c: rgba(255,255,255,.50); }
@media (prefers-color-scheme: dark){ html:not(.is-light){ --bl-c: rgba(255,241,220,.30); } }
html.is-dark{ --bl-c: rgba(255,241,220,.30); }
/* 集點卡空格比卡片更透 (0mu 2026-11-08：空格要像不同材質)：不加底色，只把後方提亮 + 加飽和，像嵌在霧玻璃裡的透明鏡片 */
.st-slot, html.is-dark .st-slot, html.is-light .st-slot{ --st-fill: transparent; -webkit-backdrop-filter: brightness(1.12) saturate(1.35); backdrop-filter: brightness(1.12) saturate(1.35); }
@media (prefers-color-scheme: dark){ html:not(.is-light) .st-slot{ --st-fill: transparent; -webkit-backdrop-filter: brightness(1.22) saturate(1.4); backdrop-filter: brightness(1.22) saturate(1.4); } }
html.is-dark .st-slot{ -webkit-backdrop-filter: brightness(1.22) saturate(1.4); backdrop-filter: brightness(1.22) saturate(1.4); }
/* 首頁會員卡：背景圖的文字顏色是 auto (或沒設定 / 背景已不存在) 時也加光暈 (0mu 2026-11-08)：
   字色維持一般文字色，深色 = 黑色光暈 2.5px (同 .bg-text-white)、淺色 = 白色光暈 3px (同 .bg-text-dark) */
:is(.bg-text-auto, [class~="bg-text-"]){ filter: drop-shadow(0 0 3px rgb(255, 255, 255)); }
@media (prefers-color-scheme: dark){ html:not(.is-light) :is(.bg-text-auto, [class~="bg-text-"]){ filter: drop-shadow(0 0 2.5px rgb(0, 0, 0)); } }
html.is-dark :is(.bg-text-auto, [class~="bg-text-"]){ filter: drop-shadow(0 0 2.5px rgb(0, 0, 0)); }

/* 刪除帳號申請 (acctdel.js、tmpl/user/acctdel.html) */
.ad-bal { display:grid; grid-template-columns:1fr auto; gap:6px 12px; font-size:14px; }
.ad-bal b { text-align:right; font-weight:700; }
.ad-warn { margin:8px 0 0; padding-left:1.2rem; font-size:13px; line-height:1.7; color:var(--ts-gray-600); }
.ad-warn li + li { margin-top:4px; }
.ad-check { display:flex; gap:8px; align-items:flex-start; font-size:13.5px; line-height:1.6; cursor:pointer; }
.ad-check input { margin-top:4px; flex:0 0 auto; }
.ad-pend { font-weight:700; font-size:14px; }

/* 禮物領取 / 自助取物櫃 (gift.js、pickup.js)：其餘沿用 .glass / .basicglass / .modalglass / .pf-tag / .x50-red / vp-notice */
.gp-state{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; line-height:1.6; color:var(--ts-gray-600);}
.gp-state.is-ready{color:var(--ts-negative-500);}
/* 可預約自助取物 = 綠色 (#52C41A，同 iOS / Android，0mu 2026-11-15 06:45；深色同色) */
.gp-state.is-can, .gp-hint.is-can > span:nth-child(-n+2){color:#52C41A;}
.gp-cell{font-size:44px; font-weight:800; line-height:1.15;}
.gp-cell-u{font-size:18px; font-weight:600; margin:0 4px;}
.gp-code{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:46px; font-weight:800; letter-spacing:.16em; line-height:1.2; color:var(--ts-negative-500);}
.gp-cap{font-size:13px; color:var(--ts-gray-600);}
.gp-hint{display:flex; align-items:center; gap:8px; padding:8px 12px; font-size:13px; line-height:1.4;}
.gp-hint > span:nth-child(2){flex:1;}
.gp-selbar{position:fixed; z-index:60; left:50%; transform:translateX(-50%); bottom:calc(env(safe-area-inset-bottom) + 14px);
    width:min(460px, calc(100vw - 32px)); display:flex; gap:10px; padding:8px; border-radius:999px;
    background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(18px) saturate(1.6); backdrop-filter:blur(18px) saturate(1.6); box-shadow:0 6px 24px rgba(0,0,0,.18);}
.gp-selbar .ts-button{flex:1; min-width:0; white-space:nowrap;}
body.gp-selon{padding-bottom:96px;}
@media (prefers-color-scheme: dark){ .gp-selbar{background:rgba(40,40,44,.6);} }
.gp-chk{display:flex; align-items:center; padding-right:8px;}
.gp-dim{opacity:.4; pointer-events:none;}
.gp-cellitems{display:flex; flex-direction:column; gap:6px; padding:4px 2px 2px;}
.gp-ci{display:flex; align-items:center; gap:10px; font-size:15px; text-align:left;}
.gp-ci img{width:44px; height:44px; border-radius:8px; object-fit:cover; flex:0 0 auto; background:#fff;}
.gp-ci .gp-done{margin-left:auto; flex:0 0 auto;}
.gp-nt-v{white-space:normal; text-align:right; padding-left:12px;}
/* 告示 (ts-notice is-negative：禮物盒期限、優惠暫停、登入錯誤) 不跟系統深色把紅改黃，一律同淺色的紅底白字 (0mu 2026-11-14) */
.ts-notice.is-negative{--ts-negative-400:#ff4d4f; --ts-negative-500:#f5222d; --ts-negative-600:#cf1322; --ts-negative-700:#a8071a; background:#f5222d; color:#fff;}
.ts-notice.is-negative .title{background:#fff; color:#cf1322;}
/* 活動兌換頁 (coupon.js)
   - 獎品卡外層 .cp-item；終了的「終了」玻璃 ribbon 畫在卡片外面 (卡片 overflow:hidden 會裁掉帶子，0mu 2026-11-15「破圖」)
   - 「終了」ribbon (0mu 2026-11-14，照排隊平板 .glass-ribbon.ribbon，同 App 0.1.469 定案)：帶子斜 45° 橫過右上角，外緣離卡片角 --rb-in (大於圓角 1.1rem，圓角與邊框露出)，
     兩端切成跟卡片邊平行、超出卡片邊 f/√2，下緣兩端各一個實心深紅內摺三角形 (--rb-f)。
     .cp-ended = 裁切框 (蓋住整張卡片、四邊往外 f/√2)；.cp-rb = 轉 45° 的帶子 + 摺角；.cp-band = 玻璃帶 (只有它有 backdrop-filter，不用 clip-path)。
     半透明紅 #F2142E .30 + backdrop blur/saturate (透出卡片邊框與 >>)，深色先墊白紗 .24 (同 App)，字置中。數值都在 --rb-* */
.cp-item{position:relative; margin:12px 0;}
.cp-ended{
    --rb-h:19px; --rb-f:5px; --rb-in:22px; --rb-fs:10px;
    --rb-tint:rgba(242,20,46,.30); --rb-fold:#c0213a; --rb-veil:transparent;
    --rb-line:rgba(255,255,255,.4); --rb-blur:1.5px; --rb-sat:1000%;
    --rb-o:calc(var(--rb-f) * .70711);
    --rb-d:calc(var(--rb-in) + (var(--rb-h) + var(--rb-f)) * 1.41421);
    --rb-w:calc(var(--rb-d) * 1.41421);
    --rb-c:calc((var(--rb-in) + var(--rb-d)) / 4);
    position:absolute; z-index:3; pointer-events:none; overflow:hidden;
    inset:calc(var(--rb-o) * -1);
}
/* 按下卡片 (s-hover 1.01) 時帶子跟著放大 (裁切框四周等距 → 中心同卡片中心) */
.cp-item:has(> .s-hover:active) > .cp-ended{transform:scale(1.01);}
.cp-rb{
    position:absolute; width:var(--rb-w); height:calc(var(--rb-h) + var(--rb-f));
    top:calc(var(--rb-o) + var(--rb-c) - (var(--rb-h) + var(--rb-f)) / 2);
    right:calc(var(--rb-o) + var(--rb-c) - var(--rb-w) / 2);
    transform:rotate(45deg);
}
.cp-rb::before,.cp-rb::after{content:""; position:absolute; top:var(--rb-h); width:var(--rb-f); height:var(--rb-f); background:var(--rb-fold);}
.cp-rb::before{left:0; clip-path:polygon(0 0, 100% 0, 0 100%);}
.cp-rb::after{right:0; clip-path:polygon(0 0, 100% 0, 100% 100%);}
.cp-band{
    position:absolute; top:0; left:-14px; right:-14px; height:var(--rb-h);
    display:flex; align-items:center; justify-content:center;
    backdrop-filter:blur(var(--rb-blur)) saturate(var(--rb-sat));
    -webkit-backdrop-filter:blur(var(--rb-blur)) saturate(var(--rb-sat));
    background:
        linear-gradient(var(--rb-line), var(--rb-line)) 0 100% / 100% 1.5px no-repeat,
        linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.02) 50%, rgba(255,255,255,0)),
        linear-gradient(var(--rb-tint), var(--rb-tint)),
        linear-gradient(var(--rb-veil), var(--rb-veil));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}
.cp-band > span{display:block; font-size:var(--rb-fs); line-height:1; font-weight:500; white-space:nowrap; color:#fff; letter-spacing:.04em; filter:drop-shadow(0 0 1.2px rgba(0,0,0,.95));}
@media (prefers-color-scheme: dark) { html:not(.is-light) .cp-ended{--rb-veil:rgba(255,255,255,.24);} }
html.is-dark .cp-ended{--rb-veil:rgba(255,255,255,.24);}
/* 終了兩件以上摺疊成一疊 (0mu 2026-11-15)：最上面顯示第一件 + 下面兩層疊卡邊，點了展開；下方列顯示件數 / 收合 */
.cp-endgrp:not(.is-open) > .cp-item ~ .cp-item{display:none;}
.cp-endgrp:not(.is-open) > .cp-item:first-child{margin-bottom:0;}
/* 疊卡邊：不管幾件最多 2 層 (2 件 = 1 層)，越後面越窄、越淡 (0mu 2026-11-15「最多就顯示 2-3 層示意」；「下方的卡片可以透明一點點」→ .6 / .35) */
.cp-stk{display:none; position:absolute; top:100%; left:12px; right:12px; height:8px; margin:0; padding:0; border-radius:0 0 14px 14px !important; pointer-events:none; opacity:.6;}
.cp-stk.is-2{top:calc(100% + 8px); left:26px; right:26px; height:7px; opacity:.35;}
.cp-endgrp:not(.is-open) > .cp-item:first-child > .cp-stk{display:block;}
.cp-endbar{display:flex; align-items:center; justify-content:center; gap:6px; padding:8px 0; font-size:13px; color:var(--ts-gray-500); cursor:pointer;}
.cp-endgrp:not(.is-open) > .cp-endbar{margin-top:18px;}
.cp-endgrp.is-open > .cp-endbar .ts-icon{transform:rotate(180deg);}
.cp-endgrp:not(.is-open) .cp-endc, .cp-endgrp.is-open .cp-endn{display:none;}
/* 錄影頁 (2026-11-15 改版，REC_SPEC.md)：機種卡 (每列兩張，單數最後一張整列) + 日期時間軸在列表外 + 錄影列 */
.rec-hide{display:none !important;}
.rec-ell{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.rec-cards{display:flex; flex-wrap:wrap; justify-content:space-between;}
.rec-card{flex-grow:1; width:45%; min-width:45%; margin:5px 4px; cursor:pointer;}
.rec-cardtx{color:#FFF; display:flex; align-items:flex-end; justify-content:space-between; gap:8px;}
.rec-cardtx .ts-header{min-width:0;}
.rec-n{font-size:12px; opacity:.9; flex-shrink:0;}
.rec-mhead .rec-n{flex-shrink:1; min-width:0;}
.rec-back{margin:0 0 10px;}
.rec-mhead.gamesel{margin:0 0 14px;}
/* 依日期分批 (Lugh 11-15 00:40)：圓點 + 右邊日期標頭，下面一張卡片；直線從圓點沿卡片左邊往下，天與天之間留白 */
/* 依日期分批 (REC_SPEC 3，Lugh 11-15 00:40)：圓點 10px gray-600 + 右邊「月/日」15 粗體 + 星期 13 灰，標題與卡片間距 8；
   卡片左邊留 24px 給時間軸，直線 2px gray-300 從圓點沿卡片左側到這批最後一列的中間 (接一小段橫線)；天與天之間 18px */
.rec-dblk{position:relative; padding-left:24px; margin-bottom:18px;}
.rec-dblk::before{content:""; position:absolute; left:4px; top:13px; bottom:43px; width:2px; border-radius:1px; background:var(--ts-gray-300);}
.rec-dblk::after{content:""; position:absolute; left:4px; bottom:41px; width:20px; height:2px; border-radius:1px; background:var(--ts-gray-300);}
.rec-dh{position:relative; display:flex; align-items:baseline; gap:6px; height:26px; line-height:26px; margin-bottom:8px;}
.rec-dh b{font-size:15px; font-weight:700; color:var(--ts-gray-800);}
.rec-dh span{font-size:13px; color:var(--ts-gray-500);}
.rec-dot{position:absolute; left:-24px; top:8px; width:10px; height:10px; border-radius:50%; background:var(--ts-gray-600); z-index:1;}
.rec-dcard{border:1px solid var(--ts-gray-300); border-radius:12px; background:var(--ts-gray-50); overflow:hidden;}
.rec-row{position:relative; display:flex; align-items:center; gap:12px; min-height:84px; padding:10px 6px 10px 12px;}
/* 同一天的列之間：分隔線從文字開始 */
.rec-row + .rec-row::before{content:""; position:absolute; top:0; left:84px; right:0; height:1px; background:var(--ts-gray-300);}
.rec-thumb{position:relative; flex:0 0 60px; width:60px; height:60px; padding:0; border:0; border-radius:8px; overflow:hidden; background:#000; cursor:pointer;}
.rec-thumb video, .rec-thumb img{width:100%; height:100%; object-fit:cover; display:block; pointer-events:none;}
.rec-thumb .ts-icon{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:24px; height:24px; border-radius:50%;
    background:rgba(0,0,0,.45); color:#fff; font-size:10px; display:flex; align-items:center; justify-content:center; padding-left:1px;}
.rec-thumb[disabled]{cursor:default; opacity:.45;}
.rec-txt{flex:1; min-width:0; cursor:pointer; line-height:1.35;}
.rec-cab{font-size:15px; font-weight:600; color:var(--ts-gray-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.rec-sub{font-size:13px; color:var(--ts-gray-600); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.rec-st{font-size:12px; color:var(--ts-gray-500); margin-top:1px;}
.rec-star{flex:0 0 40px; height:40px; padding:0; border:0; background:none; cursor:pointer; color:var(--ts-gray-400); font-size:18px;}
.rec-star.is-on{color:#f5b301;}
.rec-menu{display:flex; flex-direction:column; gap:8px; margin:12px 0 0;}
.rec-menu .rec-mbtn{justify-content:flex-start;}
.rec-player{margin:12px 0 0; padding:0 !important; overflow:hidden; background:#000;}
.rec-player video{display:block; width:100%; max-height:calc(100dvh - 420px);}
.rec-phead{display:flex; justify-content:space-between; align-items:center; gap:8px;}
.rec-ptitle{font-size:15px; font-weight:500; color:var(--ts-gray-600); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.rec-pinfo{margin:12px 2px 0; font-size:14px; line-height:1.4; overflow-wrap:anywhere;}
.rec-pact{display:flex; flex-direction:column; gap:10px; margin:12px 0 0;}
.rec-pact .ts-button .ts-icon{margin-right:8px;}
.rec-pact .ts-button.is-on .ts-icon{color:#f5b301;}
/* 打版：所有錄影機種列 + 展開 (feat/web-rec-list-mock，未上線) */
.rec-mi{position:relative; margin-bottom:6px;}
.rec-mrow{display:flex; align-items:center; gap:12px; padding:6px 0; cursor:pointer;}
.rec-badge{flex:0 0 48px; width:48px; height:48px; border-radius:50% !important; padding:3px; overflow:hidden; position:relative;}
/* 機種圖上緣有些是白的：向內裁切，只取中間 80% (500px 取 400px，0mu 11-15 01:14) */
.rec-bimg{display:block; width:100%; height:100%; border-radius:50%; overflow:hidden;}
.rec-bimg img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.25);}
.rec-mtx{flex:1; min-width:0; line-height:1.35;}
.rec-mname{font-size:16px; font-weight:600; color:var(--ts-gray-900);}
.rec-msub{font-size:13px; color:var(--ts-gray-500);}
.rec-mchev{color:var(--ts-gray-500); transition:transform .2s;}
.rec-mi.is-open .rec-mchev{transform:rotate(180deg);}
/* 展開：時間軸中心對齊徽章中心 (24px)，最上面接到徽章底部 */
.rec-mbody{position:relative; padding-top:10px;}
.rec-mbody::before{content:""; position:absolute; left:23px; top:-6px; height:29px; width:2px; border-radius:1px; background:var(--ts-gray-300);}
.rec-mbody .rec-days{margin-left:19px;}