/* Bottom navigation + My store + Earnings views */
.app { padding-bottom: calc(68px + env(safe-area-inset-bottom)) }
.bnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: repeat(3,1fr); background: #fff; border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -4px 18px rgba(43,29,31,.06) }
.bn { border: 0; background: none; padding: .55rem 0 .5rem; font-size: .72rem; font-weight: 600; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: .1rem }
.bn span { font-size: 1.3rem; line-height: 1 } .bn.on { color: var(--primary) } .bn.on span { transform: translateY(-1px) }
.month-line { padding-bottom: 1rem }
.view { padding: .9rem 1rem 1rem }
.mcard { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: .85rem .95rem; margin-bottom: .6rem; width: 100%; text-align: left; font: inherit; color: inherit }
.sec-title { display: flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 1.1rem 0 .5rem }
.sec-title span { background: var(--ink); color: #fff; border-radius: 999px; padding: .05rem .5rem; font-size: .68rem } .sec-title em.warn { margin-left: auto; font-style: normal; color: var(--red); text-transform: none; letter-spacing: 0 }
.hint.center { text-align: center; margin: .8rem 0 }
.pill { display: inline-block; font-style: normal; font-size: .68rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px } .pill.grey { background: #EEE8DC; color: #6B5F52 } .pill.green { background: #E3F4EA; color: #1F5B38 } .pill.amber { background: #FFF3D6; color: #7A5B12 }
/* store */
.store-head { background: linear-gradient(135deg,#2A1220,#3E1822); color: #fff; border: 0 }
.sh-name { font-size: 1.15rem; font-weight: 800 } .sh-line { font-size: .8rem; opacity: .85; margin-top: .2rem }
.terms { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem } .tchip { background: rgba(255,255,255,.12); border-radius: 999px; padding: .25rem .65rem; font-size: .72rem } .tchip b { color: #F3CF86 }
.prod { display: flex; gap: .8rem; align-items: flex-start } .prod.is-out { opacity: .78 }
.p-img { flex: none; width: 64px; height: 64px; border-radius: 12px; background: #F6EFE2; overflow: hidden; display: grid; place-items: center } .p-img img { width: 100%; height: 100%; object-fit: cover } .noimg { font-size: 1.8rem }
.p-main { flex: 1; min-width: 0 } .p-name { font-weight: 700; font-size: .95rem } .p-sub { font-size: .75rem; color: var(--muted); margin-top: .1rem }
.p-price { margin-top: .25rem; font-size: .92rem } .p-price s { color: var(--muted); font-size: .78rem } .sold { float: right; font-size: .7rem; color: var(--muted) }
.p-ctl { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .6rem; flex-wrap: wrap }
.stepper { display: inline-flex; border: 1.5px solid var(--border); border-radius: 11px; overflow: hidden } .stepper button { width: 38px; border: 0; background: #FBF6EC; font-size: 1.15rem; font-weight: 700 }
.stepper input { width: 58px; text-align: center; border: 0; font-size: .95rem; font-weight: 700; padding: .45rem 0; -moz-appearance: textfield } .stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none }
.sw { display: inline-flex; align-items: center; gap: .45rem; font-size: .76rem; font-weight: 600 } .sw input { display: none } .sw span { width: 42px; height: 24px; border-radius: 999px; background: #D8CDBA; position: relative; transition: .2s } .sw span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: .2s } .sw input:checked + span { background: var(--green) } .sw input:checked + span::after { left: 21px } .sw em { font-style: normal; min-width: 5.2em }
/* earnings */
.bal { background: linear-gradient(135deg,#1F5B38,#2F7D4F); color: #fff; border: 0; text-align: center }
.bal-k { font-size: .76rem; opacity: .9; text-transform: uppercase; letter-spacing: .07em } .bal-v { font-size: 2.1rem; font-weight: 800; margin: .15rem 0 } .bal-v.neg { color: #FFD3CF }
.bal-s { font-size: .8rem; opacity: .95 } .bal-n { font-size: .72rem; opacity: .8; margin-top: .45rem }
.seg { display: grid; grid-template-columns: repeat(3,1fr); background: #EFE7D8; border-radius: 12px; padding: 3px; margin: .8rem 0 .5rem } .seg button { border: 0; background: none; padding: .55rem 0; border-radius: 10px; font-weight: 700; font-size: .84rem; color: var(--muted) } .seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.1) }
.pager { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem } .pager button { width: 42px; height: 38px; border-radius: 11px; border: 1px solid var(--border); background: #fff; font-size: 1.3rem } .pager b { font-size: .95rem }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem } .sum { display: flex; flex-direction: column; gap: .25rem; margin: 0 } .sum b { font-size: 1.35rem } .sum small { font-size: .7rem; color: var(--muted) } .sum .tag { align-self: flex-start }
.calc { margin-top: .6rem } .calc div { display: flex; justify-content: space-between; padding: .3rem 0; font-size: .86rem } .calc .tot { border-top: 1.5px dashed var(--border); margin-top: .3rem; padding-top: .55rem; font-size: 1rem; font-weight: 800 } .calc.flat { background: #FBF6EC; border: 0 }
.days div { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .35rem 0; font-size: .82rem; border-bottom: 1px solid #F2EBDD } .days div:last-child { border: 0 } .days i { font-style: normal; font-size: .72rem; padding: .1rem .45rem; border-radius: 999px }
.ord { display: flex; justify-content: space-between; align-items: center; gap: .6rem }
.stmt { display: flex; justify-content: space-between; align-items: center; gap: .6rem; cursor: pointer } .stmt .r { text-align: right; display: flex; flex-direction: column; gap: .25rem; align-items: flex-end }
.stmt-orders div { display: flex; justify-content: space-between; padding: .3rem 0; font-size: .82rem; border-bottom: 1px solid #F2EBDD }
.btn-install { width: 100%; margin-top: .8rem; padding: .8rem; border-radius: 12px; border: 1.5px dashed var(--primary); background: #FFF6F6; color: var(--primary); font-weight: 700 }
.login-ios { margin-top: .8rem; font-size: .78rem; color: var(--muted) }

.flow{display:flex;justify-content:space-between;margin:.6rem 0 .2rem;position:relative}
.flow .fd{flex:1;text-align:center;position:relative;font-size:.58rem;color:#9A8F80}
.flow .fd i{display:block;width:12px;height:12px;border-radius:50%;background:#E3D9C6;margin:0 auto 3px;position:relative;z-index:1}
.flow .fd::before{content:"";position:absolute;top:5px;left:-50%;width:100%;height:2px;background:#E3D9C6}
.flow .fd:first-child::before{display:none}
.flow .fd.done i,.flow .fd.done::before,.flow .fd.now::before{background:#2F7D4F}
.flow .fd.done i{background:#2F7D4F}.flow .fd.now i{background:#B71C24;box-shadow:0 0 0 4px rgba(183,28,36,.18)}
.flow .fd.now{color:#B71C24;font-weight:700}.flow .fd em{font-style:normal}
.flow-hint{font-size:.78rem;font-weight:600;color:#5B4A2E;background:#FBF6EC;border-radius:10px;padding:.35rem .6rem;margin:.4rem 0}