/* Tikpen v119 */
/* 1. Phone top bar: username in the logo font */
@media(max-width:900px){
 .topbrand113{gap:0!important;min-width:0;max-width:46vw}
 .topbrand113[hidden]{display:none!important}
 .topbrand113 b.uname119:is(#_,*){font-size:19px!important;color:var(--tp-ink)!important;overflow:hidden;text-overflow:ellipsis;display:block!important;padding-inline:2px 4px;line-height:1.3}
 /* Profile: less empty space between the top bar and the cover */
 body[data-r119="profile"] #main{padding-top:6px!important}
 body[data-r119="profile"] #main>.page-intro:first-child{margin:0!important;min-height:0!important;padding:0!important}
 body[data-r119="profile"] #main>.page-intro:first-child:not(:has(h1:not(:empty))){display:none!important}
}
/* 2. Smooth navigation */
@keyframes enter119{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fade119{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#main.enter119{animation:enter119 .28s cubic-bezier(.22,.8,.3,1) both}
[role="tabpanel"]:not([hidden]){animation:fade119 .24s ease both}
[role="tab"],.tabs button,.tabs a,.segmented button,#nav a,#nav button,.sidebar nav a{transition:color .22s ease,background-color .22s ease,border-color .22s ease,box-shadow .22s ease,opacity .22s ease}
#mobileNav button{transition:color .25s ease,transform .18s ease;-webkit-tap-highlight-color:transparent}
#mobileNav button:active{transform:scale(.92)}
#mobileNav button svg{transition:transform .28s cubic-bezier(.3,1.5,.5,1)}
#mobileNav button[aria-current="page"] svg{transform:translateY(-1px) scale(1.06)}
#mobileNav.nav119 button::before{opacity:0!important}
#mobileNav .pill119{position:absolute;inset-inline-start:auto;left:0;top:0;width:46px;height:30px;border-radius:999px;background:rgba(var(--green-rgb,154,107,37),0.16);pointer-events:none;opacity:0;transition:transform .34s cubic-bezier(.3,1.2,.4,1),opacity .2s ease;will-change:transform}
#mobileNav button{position:relative;z-index:1}
dialog#modal[open]{animation:fade119 .22s ease both}
@media(prefers-reduced-motion:reduce){#main.enter119,[role="tabpanel"],dialog#modal[open]{animation:none!important}#mobileNav .pill119{transition:none}}
/* 3. Statistics */
.stats119{max-width:980px;margin-inline:auto}
.stats119 .sub119{margin:26px 4px 12px;font-size:1.05rem}
.hero119{padding:18px 18px 12px!important;overflow:hidden}
.hero119 header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px}
.hero119 header small{display:block;opacity:.7;font-size:.86rem}
.hero119 header b{font-size:2.3rem;line-height:1.15;color:var(--green)}
.delta119{display:flex;flex-direction:column;align-items:flex-end;font-weight:800;border-radius:14px;padding:6px 12px;font-size:1rem;direction:rtl}
.delta119 small{font-weight:400;font-size:.72rem;opacity:.8}
.delta119.up{color:#1f7a4d;background:#1f7a4d14}.delta119.down{color:#b3472f;background:#b3472f14}
.chart119{display:flex;align-items:stretch;gap:clamp(3px,1vw,10px);height:170px;margin-top:10px}
.chart119 .bar119{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;outline:none}
.chart119 .bar119>span{flex:1;display:flex;align-items:flex-end}
.chart119 .bar119 i{display:block;width:100%;border-radius:7px 7px 3px 3px;background:rgba(var(--green-rgb,154,107,37),0.5);transform-origin:bottom;animation:grow119 .5s cubic-bezier(.2,.8,.3,1) both;transition:background-color .2s}
.chart119 .bar119:hover i,.chart119 .bar119:focus i{background:var(--green)}
.chart119 .bar119:last-child i{background:var(--green)}
.chart119 small{height:14px;font-size:10px;line-height:14px;text-align:center;opacity:.65;white-space:nowrap;overflow:visible;display:flex;justify-content:center}
@keyframes grow119{from{transform:scaleY(.05);opacity:.3}to{transform:none;opacity:1}}
.hero119 .foot119{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px;padding-top:10px;border-top:1px solid rgba(128,128,128,.22);font-size:.9rem;opacity:.9}
.duo119{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.mini119{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px!important}
.mini119 small{display:block;opacity:.7;font-size:.8rem}.mini119 b{font-size:1.5rem;color:var(--green)}
.spark119{width:110px;height:34px;flex:none}
.spark119 path{fill:none;stroke:var(--green);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.grid119{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.metric119{display:flex!important;flex-direction:column;align-items:flex-start;gap:4px;padding:14px!important;text-align:start;transition:transform .2s ease,box-shadow .2s ease}
.metric119:hover{transform:translateY(-2px)}
.metric119 .mi119{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(var(--green-rgb,154,107,37),0.13);color:var(--green);margin-bottom:4px}
.metric119 .mi119 svg{width:20px;height:20px}
.metric119 b{font-size:1.45rem;line-height:1.2}.metric119 small{opacity:.72}
.top119{padding:6px!important}
.top119 a{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:14px;text-decoration:none;color:inherit;transition:background-color .2s}
.top119 a:hover{background:rgba(var(--green-rgb,154,107,37),0.08)}
.top119 a>i{font-style:normal;font-weight:800;width:30px;height:30px;flex:none;border-radius:10px;display:grid;place-items:center;background:rgba(var(--green-rgb,154,107,37),0.13);color:var(--green)}
.top119 a>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.top119 b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top119 em{display:block;height:5px;border-radius:9px;width:var(--w119);background:linear-gradient(90deg,var(--green),rgba(var(--green-rgb,154,107,37),0.45))}
.top119 small{display:flex;align-items:center;gap:5px;opacity:.75;font-size:.8rem}
.top119 small svg{width:14px;height:14px}
.tips119 ul{margin:0;padding-inline-start:20px;display:grid;gap:8px;line-height:1.7}
.tips119 b{color:var(--green)}
.note119{margin-top:18px;font-size:.82rem}
@media(max-width:600px){.duo119{grid-template-columns:1fr}.hero119 header b{font-size:1.9rem}.chart119{height:140px}.chart119 small{font-size:9px}.grid119{grid-template-columns:repeat(2,1fr)}}
/* 4. Lock icons */
.pv28-button.lock119{color:var(--green);opacity:.95}
.pv28-button.lock119:not(.mine119){cursor:default;opacity:.75}
.pv28-button.lock119 svg{width:1.15em;height:1.15em}
.slock119{display:inline-grid;place-items:center;width:18px;height:18px;margin-inline-start:6px;vertical-align:-3px;flex:none;border-radius:6px;background:#0000004d;color:#fff;font-style:normal}
.slock119 svg{width:12px;height:12px;stroke-width:2.2}
.slock119.mine119{cursor:pointer}
.sp32-card .slock119{background:rgba(var(--green-rgb,154,107,37),0.16);color:var(--green)}
.story-owner>span:has(.slock119){display:inline-flex!important;flex-direction:row!important;align-items:center;gap:6px;flex-wrap:nowrap}
.story-owner .slock119{margin:0;vertical-align:0}

/* v122 */
.sp32-title:empty{display:none!important}
/* Top bar: smaller account name and page titles so the icons keep their space */
@media(max-width:900px){
 .topbrand113 b.uname119:is(#_,*){font-size:15px!important;line-height:1.25}
 .topbar>h1:is(#_,*),.topbar>[id$="Title69"],.topbar>[id^="routeTitle"],.topbar>h2{font-size:15px!important;line-height:1.3!important;min-width:0;flex:0 1 auto;max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .topbar>.messages-nav43,.topbar>[id^="messagesNav"]{font-size:14px!important;min-width:0}
 .topbar .top-actions{flex:0 0 auto}
}
/* Story viewer: soft shadow so the icons and names stay readable on any picture */
.story-screen :is(button,a) svg{filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.55)) drop-shadow(0 0 6px rgba(0,0,0,.25))}
.story-screen .story-owner b,.story-screen .story-owner small,.story-screen .story-owner span{text-shadow:0 1px 2px rgba(0,0,0,.55),0 0 8px rgba(0,0,0,.25)}
.story-screen .story-owner img{box-shadow:0 1px 4px rgba(0,0,0,.4)}