/* Новая панель (макет «Панель Tapmap»): стили прототипа один в один.
   Собрано из прототипа скриптом build_v4css.py: экраны — внутри .v4s, каркас — .v4app. Правки делать в прототипе. */
:root {--bg: #edf2f7; --bg-grad: radial-gradient(1200px 600px at 8% -10%, #dfeaf6 0%, transparent 60%), radial-gradient(900px 600px at 100% 0%, #ece6f6 0%, transparent 55%), radial-gradient(1000px 700px at 60% 110%, #e2f1ea 0%, transparent 60%), linear-gradient(180deg, #f2f5f9 0%, #eef1f5 100%);
  --surface: rgba(255,255,255,.62); --surface-solid: #ffffff; --surface-2: rgba(240,244,249,.85); --border: rgba(255,255,255,.75); --line: #e3e8ef; --btn-line: #c9d3df;
  --text: #1f2a37; --muted: #6b7787;
  --lime: #d6e46e; --lime-deep: #b9cc45; --lime-weak: rgba(226,236,160,.55); --lime-ink: #556314; --peach: #fde6dc; --peach-ink: #b0532c; --amber: #f7ecd2; --amber-ink: #8a5a00;
  --bar: #c3cfdc; --bar-bg: rgba(214,224,235,.6); --bar-own: #9fb236; --mini: #d5dee9; --dark: #23324a; --on-dark: #ffffff; --aura-op: .45;
  --main-grad: linear-gradient(105deg, rgba(232,241,190,.9) 0%, rgba(222,236,248,.9) 55%, rgba(236,230,248,.9) 100%);
  --shadow: 0 1px 2px rgba(35,50,74,.04), 0 8px 24px rgba(35,50,74,.05); --shadow-up: 0 14px 34px rgba(35,50,74,.12);
  --font: "Onest", "Segoe UI", system-ui, sans-serif;}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {--bg: #121826; --bg-grad: radial-gradient(1200px 600px at 8% -10%, #1d2a44 0%, transparent 60%), radial-gradient(900px 600px at 100% 0%, #2a2140 0%, transparent 55%), radial-gradient(1000px 700px at 60% 110%, #14302a 0%, transparent 60%), linear-gradient(180deg, #121826 0%, #0f141f 100%);
  --surface: rgba(30,38,54,.6); --surface-solid: #1c2433; --surface-2: rgba(40,50,70,.7); --border: rgba(255,255,255,.08); --line: #2c3648; --btn-line: rgba(255,255,255,.18);
  --text: #e8edf4; --muted: #9aa6b6;
  --lime: #d6e46e; --lime-deep: #b9cc45; --lime-weak: rgba(150,170,60,.22); --lime-ink: #dbe78a; --peach: #3d2a26; --peach-ink: #f2a98c; --amber: #3a3120; --amber-ink: #e8c47e;
  --bar: #4a5870; --bar-bg: rgba(60,72,95,.6); --bar-own: #d6e46e; --mini: #3a4760; --dark: #e8edf4; --on-dark: #121826; --aura-op: .16;
  --main-grad: linear-gradient(105deg, rgba(90,105,40,.35) 0%, rgba(40,70,110,.35) 55%, rgba(80,60,120,.35) 100%);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25); --shadow-up: 0 14px 34px rgba(0,0,0,.45); color-scheme: dark}
}
:root[data-theme="dark"] {--bg: #121826; --bg-grad: radial-gradient(1200px 600px at 8% -10%, #1d2a44 0%, transparent 60%), radial-gradient(900px 600px at 100% 0%, #2a2140 0%, transparent 55%), radial-gradient(1000px 700px at 60% 110%, #14302a 0%, transparent 60%), linear-gradient(180deg, #121826 0%, #0f141f 100%);
  --surface: rgba(30,38,54,.6); --surface-solid: #1c2433; --surface-2: rgba(40,50,70,.7); --border: rgba(255,255,255,.08); --line: #2c3648; --btn-line: rgba(255,255,255,.18);
  --text: #e8edf4; --muted: #9aa6b6;
  --lime: #d6e46e; --lime-deep: #b9cc45; --lime-weak: rgba(150,170,60,.22); --lime-ink: #dbe78a; --peach: #3d2a26; --peach-ink: #f2a98c; --amber: #3a3120; --amber-ink: #e8c47e;
  --bar: #4a5870; --bar-bg: rgba(60,72,95,.6); --bar-own: #d6e46e; --mini: #3a4760; --dark: #e8edf4; --on-dark: #121826; --aura-op: .16;
  --main-grad: linear-gradient(105deg, rgba(90,105,40,.35) 0%, rgba(40,70,110,.35) 55%, rgba(80,60,120,.35) 100%);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25); --shadow-up: 0 14px 34px rgba(0,0,0,.45); color-scheme: dark}
* {box-sizing: border-box}
body {background: var(--bg); background-image: var(--bg-grad); background-attachment: fixed; color: var(--text); font: 14px/1.45 var(--font);}
.v4s .page {max-width: 1440px; margin: 0 auto; padding-block: 32px 48px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: grid; gap: 20px}
.v4s .card {background: var(--surface); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow); padding: 24px 26px; min-width: 0; transition: transform .25s ease, box-shadow .25s ease}
.v4s .card.lift:hover {transform: translateY(-2px); box-shadow: var(--shadow-up)}
.v4s h1 {font-size: 30px; font-weight: 600; margin: 0; letter-spacing: -.01em; text-wrap: balance}
.v4s h2 {font-size: 17px; font-weight: 600; margin: 0}
.v4s .sub {color: var(--muted); font-size: 13px}
.v4s .muted {color: var(--muted)}
.v4s .num {font-variant-numeric: tabular-nums}
.v4s .head {display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; justify-content: space-between}
.v4s .wave {display: inline-block; transform-origin: 70% 80%; animation: wave 1.6s ease .5s 1}
@keyframes wave { 0%,100% { transform: rotate(0) } 15%,45% { transform: rotate(16deg) } 30%,60% { transform: rotate(-8deg) } }
.v4s .live {display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); margin-right: 6px; vertical-align: 1px; animation: pulse 2.4s ease-in-out infinite}
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(201,211,106,.7) } 50% { box-shadow: 0 0 0 6px rgba(201,211,106,0) } }
.v4s .controls {display: flex; gap: 10px; flex-wrap: wrap}
.v4s .seg {position: relative; display: flex; background: var(--surface-solid); border: 1px solid var(--btn-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 999px; padding: 4px}
.v4s .seg button {position: relative; z-index: 1; border: 0; background: none; font: 500 12.5px var(--font); color: var(--muted); padding: 7px 14px; border-radius: 999px; cursor: pointer; transition: color .2s}
.v4s .seg button.on {color: var(--on-dark); font-weight: 600}
.v4s .seg .knob {position: absolute; top: 4px; bottom: 4px; border-radius: 999px; background: var(--dark); box-shadow: var(--shadow); transition: left .3s cubic-bezier(.3,.7,.2,1), width .3s cubic-bezier(.3,.7,.2,1)}
.v4s .btn {border: 1px solid var(--btn-line); background: var(--surface-solid); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--text); font: 600 12.5px var(--font); padding: 8px 16px; border-radius: 999px; cursor: pointer}
.v4s button:focus-visible, .v4s .row:focus-visible {outline: 2px solid var(--bar-own); outline-offset: 2px}
.v4s .since {display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 14px 20px}
.v4s .since b {font-size: 14px; margin-right: 4px}
.v4s .chip {display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--btn-line); background: var(--surface-solid); border-radius: 999px; padding: 5px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: transform .2s, background .2s; animation: chipIn .45s cubic-bezier(.2,.8,.2,1) both}
.v4s .chip:hover {transform: translateY(-1px); background: var(--lime-weak)}
.v4s .chip.own {background: var(--lime); border-color: transparent; color: #2a2926}
.v4s .chip.own::before {content: ""; width: 6px; height: 6px; border-radius: 50%; background: #2a2926; animation: pulse 2s infinite}
@keyframes chipIn { from { opacity: 0; transform: translateX(-8px) } }
.v4s .main {background: var(--main-grad); display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; padding: 16px 24px}
.v4s .main .k {color: var(--lime-ink); font-weight: 700}
.v4s .main span.f {font-weight: 500}
.v4s .main span.f + span.f::before {content: "·"; margin-right: 22px; color: var(--muted)}
.v4s .tiles {display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px}
.v4s .tile .top {display: flex; justify-content: space-between; align-items: center; gap: 8px}
.v4s .tile .lab {color: var(--muted); font-weight: 600; font-size: 13px}
.v4s .pill {display: inline-block; background: var(--lime); color: #2a2926; font-weight: 700; font-size: 12px; padding: 3px 11px; border-radius: 999px; white-space: nowrap}
.v4s .pill.grey {background: var(--bar-bg); color: var(--muted)}
.v4s .big {font-size: 38px; font-weight: 700; letter-spacing: -.02em; margin-top: 6px}
.v4s .big small {font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-left: 6px}
.v4s .mini {display: flex; align-items: flex-end; gap: 3px; height: 44px; margin-top: 10px; border-bottom: 1px solid var(--line)}
.v4s .mini i {flex: 1; background: linear-gradient(180deg, var(--mini), color-mix(in srgb, var(--mini) 55%, transparent)); border-radius: 2px 2px 0 0; transform-origin: bottom; animation: grow .7s cubic-bezier(.2,.8,.2,1) both}
.v4s .mini i.own {background: linear-gradient(180deg, var(--lime), var(--lime-deep))}
@keyframes grow { from { transform: scaleY(0) } }
.v4s .cap {font-size: 10.5px; color: var(--muted); margin-top: 4px}
.v4s .foot {margin-top: 12px; font-size: 12.5px; font-weight: 500}
.v4s .foot .muted {font-size: 11.5px; font-weight: 400; display: block}
.v4s .two {display: grid; grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr); gap: 16px}
.v4s .tabs {display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 10px}
.v4s .tabs button:hover {border-color: var(--muted)}
.v4s .tabs button {border: 1px solid var(--btn-line); background: var(--surface-solid); color: var(--text); font: 600 12.5px var(--font); padding: 7px 14px; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s}
.v4s .tabs button.on {background: var(--dark); border-color: var(--dark); color: var(--on-dark)}
.v4s .thead, .v4s .row {display: grid; grid-template-columns: 44px minmax(120px, 1.2fr) minmax(60px, 2fr) 90px 56px; gap: 12px; align-items: center}
.v4s .thead {color: var(--muted); font-size: 11px; font-weight: 600; padding: 0 12px 6px}
.v4s .row {padding: 9px 12px; border-radius: 12px; transition: background .25s}
.v4s .row:hover {background: var(--surface-2)}
.v4s .row.own {background: var(--lime-weak)}
.v4s .row .r {font-weight: 700; font-size: 15px; text-align: center}
.v4s .row .b {display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 500}
.v4s .row .b span:last-child {overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.v4s .row.own .b {font-weight: 700}
.v4s .av {flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 11.5px; font-weight: 700}
.v4s .track {height: 8px; background: var(--bar-bg); border-radius: 4px; overflow: hidden}
.v4s .track i {display: block; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--bar) 55%, transparent), var(--bar)); border-radius: 4px; width: 0; transition: width .8s cubic-bezier(.2,.8,.2,1)}
.v4s .row.own .track i {background: linear-gradient(90deg, var(--lime), var(--bar-own))}
.v4s .row .v {text-align: right; font-weight: 600}
.v4s .row .s {text-align: right; color: var(--muted); font-size: 12.5px}
.v4s .gap {color: var(--muted); padding: 0 24px; line-height: .6}
.v4s .all {margin-top: 10px; width: 100%; padding: 11px; border-radius: 12px; border: 1px solid var(--btn-line); background: var(--surface-solid); color: var(--text); font: 600 13px var(--font); cursor: pointer; transition: background .2s}
.v4s .all:hover {background: var(--surface-2)}
.v4s .fade {animation: fade .35s ease both}
@keyframes fade { from { opacity: .2 } }
.v4s .places {display: grid; margin-top: 10px}
.v4s .pl {display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line)}
.v4s .pl:first-child {border-top: 0}
.v4s .pl .t {font-weight: 600}
.v4s .pl .t small {display: block; font-weight: 400; color: var(--muted); font-size: 11.5px}
.v4s .pl .v {font-weight: 700; text-align: right}
.v4s .alerts {display: grid; gap: 10px; margin-top: 14px}
.v4s .al {display: grid; grid-template-columns: 38px minmax(0, 1fr) 16px; gap: 14px; align-items: center; background: var(--surface-solid); border: 1px solid var(--btn-line); border-radius: 14px; padding: 12px 14px; cursor: pointer; transition: transform .2s, background .2s}
.v4s .al:hover {transform: translateX(3px)}
.v4s .al .ic {width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-weight: 800}
.v4s .al .t1 {font-weight: 600}
.v4s .al .t2 {color: var(--muted); font-size: 12.5px}
.v4s .al .go {color: var(--muted); transition: transform .2s}
.v4s .al:hover .go {transform: translateX(3px)}
.v4s .week {position: relative; display: grid; gap: 18px; margin-top: 16px; padding-left: 34px}
.v4s .week::before {content: ""; position: absolute; left: 14px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--lime), var(--line)); transform-origin: top; animation: draw .9s ease .3s both}
@keyframes draw { from { transform: scaleY(0) } }
.v4s .ev {position: relative}
.v4s .ev .dot {position: absolute; left: -26px; top: 4px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--surface-solid); animation: pop .4s cubic-bezier(.3,1.6,.5,1) both}
.v4s .ev.own .dot {width: 16px; height: 16px; left: -28px; top: 2px; background: var(--lime); border: 3px solid var(--surface-solid); box-shadow: 0 0 0 4px var(--lime-weak)}
@keyframes pop { from { transform: scale(0) } }
.v4s .ev .h {display: flex; gap: 8px; align-items: center; font-weight: 700}
.v4s .tag {font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--surface-2)}
.v4s .tag.akc {background: var(--lime-weak)}
.v4s .ev p {margin: 3px 0 0; color: var(--muted); font-size: 12.5px}
.v4s .cardhead {display: flex; justify-content: space-between; align-items: baseline; gap: 10px}
.v4s .link {color: var(--text); font-weight: 600; font-size: 13px; text-decoration: none}
.v4s .in {animation: rise .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise { from { opacity: 0; transform: translateY(10px) } }
.aura {position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none}
.aura i {position: absolute; width: 46vw; height: 46vw; border-radius: 50%; filter: blur(70px); opacity: var(--aura-op); animation: drift 26s ease-in-out infinite alternate}
.aura i:nth-child(1) {background: #cfe1f5; left: -10vw; top: -12vw}
.aura i:nth-child(2) {background: #e3dcf5; right: -12vw; top: 10vh; animation-duration: 32s}
.aura i:nth-child(3) {background: #d6efe2; left: 30vw; bottom: -20vw; animation-duration: 38s}
@keyframes drift { to { transform: translate(4vw, 3vw) scale(1.08) } }
@media (max-width: 900px) {
.v4s .two {grid-template-columns: 1fr}
.v4s .thead, .v4s .row {grid-template-columns: 30px minmax(0, 1fr) 70px}
.v4s .thead :nth-child(3), .v4s .row .track, .v4s .thead :nth-child(5), .v4s .row .s {display: none}
}
@media (max-width: 520px) {
.v4s h1 {font-size: 24px}
.v4s .big {font-size: 30px}
.v4s .main span.f + span.f::before {display: none}
.v4s .main span.f {display: block; width: 100%}
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {animation: none !important; transition: none !important}
}
.v4app {max-width: 1520px; margin: 0 auto; padding-block: 24px 48px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 24px; align-items: start}
.v4app .side {position: sticky; top: calc(16px + env(safe-area-inset-top, 0px)); display: grid; gap: 4px; padding: 18px 14px}
.v4app .side .brand {display: flex; align-items: center; gap: 10px; padding: 2px 8px 14px; font-weight: 700; font-size: 16px}
.v4app .side .brand i {width: 30px; height: 30px; border-radius: 9px; background: var(--dark); color: var(--on-dark); display: grid; place-items: center; font-style: normal; font-size: 14px}
.v4app .side .brand small {display: block; font-weight: 500; color: var(--muted); font-size: 11.5px}
.v4app .side .grp {font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 12px 10px 4px}
.v4app .side button {display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1px solid transparent; background: none; color: var(--text); font: 500 14px var(--font); padding: 9px 12px; border-radius: 12px; cursor: pointer; transition: background .2s, color .2s}
.v4app .side button:hover {background: var(--surface-solid); border-color: var(--btn-line)}
.v4app .side button.on {background: var(--dark); color: var(--on-dark); font-weight: 600}
.v4app .side button .dot {width: 7px; height: 7px; border-radius: 50%; background: var(--bar)}
.v4app .side button.on .dot {background: var(--lime)}
.v4s.view {display: grid; gap: 20px; min-width: 0}
.v4s.view > * {animation: rise .5s cubic-bezier(.2,.8,.2,1) both}
.v4s.view > *:nth-child(2) {animation-delay: .05s}
.v4s.view > *:nth-child(3) {animation-delay: .1s}
.v4s.view > *:nth-child(4) {animation-delay: .15s}
.v4s.view > *:nth-child(5) {animation-delay: .2s}
.v4s.view > *:nth-child(n+6) {animation-delay: .25s}
.v4s .half {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px}
.v4s .three {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px}
.v4s .cardhead + .sub {margin-top: 2px}
.v4s .lead-q {font-size: 15px; font-weight: 500; margin: 0; max-width: 72ch}
.v4s .recs {display: grid; gap: 10px; margin-top: 14px}
.v4s .rec {background: var(--surface-solid); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; display: grid; gap: 4px; transition: transform .2s}
.v4s .rec:hover {transform: translateY(-1px)}
.v4s .rec .h {display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 12.5px; color: var(--muted)}
.v4s .rec .h b {color: var(--text)}
.v4s .rec p {margin: 0; font-size: 13px; overflow-wrap: anywhere}
.v4s .bdot {width: 8px; height: 8px; border-radius: 50%; display: inline-block}
.v4s .kv {display: grid; margin-top: 10px}
.v4s .kv div {display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line)}
.v4s .kv div:first-child {border-top: 0}
.v4s .kv span {color: var(--muted)}
.v4s .kv b {text-align: right}
.v4s .bars {display: grid; gap: 12px; margin-top: 14px}
.v4s .bl {display: grid; gap: 5px}
.v4s .bl .t {display: flex; justify-content: space-between; gap: 10px; font-size: 13px}
.v4s .bl .t b {font-variant-numeric: tabular-nums}
.v4s .bl .track {height: 8px}
.v4s .stack {display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--bar-bg); margin-top: 12px}
.v4s .stack i {display: block; height: 100%; width: 0; transition: width .9s cubic-bezier(.2,.8,.2,1)}
.v4s .legend {display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 12.5px; color: var(--muted)}
.v4s .legend span {display: inline-flex; align-items: center; gap: 6px}
.v4s .legend i {width: 9px; height: 9px; border-radius: 3px; display: inline-block}
.v4s .picks {display: flex; flex-wrap: wrap; gap: 8px}
.v4s .picks button {border: 1px solid var(--btn-line); background: var(--surface-solid); color: var(--text); font: 600 12.5px var(--font); padding: 6px 13px; border-radius: 999px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; transition: background .2s}
.v4s .picks button:hover {border-color: var(--muted)}
.v4s .picks button.on {background: var(--dark); color: var(--on-dark); border-color: var(--dark)}
.v4s .picks button em {font-style: normal; font-size: 10.5px; background: var(--lime); color: #2a2926; border-radius: 999px; padding: 0 6px}
.v4s .dirs {display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px}
.v4s .dir {text-align: left; font: inherit; color: inherit; cursor: pointer; border: 1px solid var(--btn-line); background: var(--surface); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: 18px; padding: 14px 16px; display: grid; gap: 6px; transition: transform .2s, box-shadow .2s, border-color .2s}
.v4s .dir:hover {transform: translateY(-2px); box-shadow: var(--shadow-up)}
.v4s .dir.on {border-color: var(--dark); box-shadow: 0 0 0 2px var(--dark) inset}
.v4s .dir .n {font-size: 26px; font-weight: 700}
.v4s .dir .mini {height: 28px; margin-top: 2px}
.v4s .note {font-size: 12px; color: var(--muted); margin: 10px 0 0}
.v4s .empty {color: var(--muted); font-size: 13px; padding: 10px 0}
.v4s .tag2 {font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--bar-bg); color: var(--text)}
.v4s .tag2.l {background: var(--lime-weak)}
.v4s .tag2.p {background: var(--peach); color: var(--peach-ink)}
.v4s .grid-rate {display: grid; grid-template-columns: 34px minmax(140px, 1.3fr) minmax(50px, 1.2fr) repeat(var(--cols, 2), minmax(56px, auto)); gap: 12px; align-items: center}
@media (max-width: 1100px) {
.v4s .three {grid-template-columns: 1fr 1fr}
}
@media (max-width: 900px) {
.v4app {grid-template-columns: 1fr}
.v4app .side {position: static; display: flex; overflow-x: auto; gap: 6px; padding: 10px; border-radius: 18px}
.v4app .side .brand, .v4app .side .grp {display: none}
.v4app .side button {width: auto; white-space: nowrap; flex: 0 0 auto}
.v4s .half, .v4s .three {grid-template-columns: 1fr}
.v4s .grid-rate {grid-template-columns: 26px minmax(0, 1fr) repeat(var(--cols, 2), auto)}
.v4s .grid-rate .track {display: none}
}
.v4s .mini i.foc {background: linear-gradient(180deg, var(--dark), color-mix(in srgb, var(--dark) 70%, transparent))}
.v4s .pl.go {width: 100%; font: inherit; color: inherit; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); grid-template-columns: minmax(0, 1fr) auto auto 14px; cursor: pointer; border-radius: 12px; padding: 10px 8px; transition: background .2s}
.v4s .pl.go:first-child {border-top: 0}
.v4s .pl.go:hover {background: var(--surface-solid)}
.v4s .pl .arrow {color: var(--muted); transition: transform .2s}
.v4s .pl.go:hover .arrow {transform: translateX(3px)}
.v4s button.link {border: 0; background: none; cursor: pointer; font: 600 13px var(--font); color: var(--text)}
.v4s .tt {display: grid; margin-top: 12px}
.v4s .tt .th, .v4s .tt .tr {display: grid; grid-template-columns: minmax(0, 1.4fr) 80px minmax(0, 1.4fr); gap: 12px; align-items: center; padding: 9px 4px; border-top: 1px solid var(--line)}
.v4s .tt .th {color: var(--muted); font-size: 11.5px; font-weight: 600; border-top: 0}
.v4s .logo {flex: 0 0 26px; width: 26px; height: 26px; border-radius: 8px; background: #fff center/cover no-repeat; box-shadow: 0 0 0 1px var(--line)}
.v4s .logo.own {box-shadow: 0 0 0 2px var(--lime)}
.v4s .logo.sm {flex-basis: 16px; width: 16px; height: 16px; border-radius: 5px; display: inline-block; vertical-align: -3px}
.v4s .goal {display: grid; gap: 12px}
.v4s .gnums {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px}
.v4s .gnums div {display: grid; gap: 2px}
.v4s .gnums span {font-size: 12px; color: var(--muted)}
.v4s .gnums b {font-size: 20px; font-weight: 700}
.v4s .gnums .now b {font-size: 26px}
.v4s .gtrack {height: 10px; background: var(--bar-bg); border-radius: 5px; overflow: hidden}
.v4s .gtrack i {display: block; height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, var(--lime), var(--bar-own)); transition: width 1s cubic-bezier(.2,.8,.2,1)}
.v4s .gfoot {display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 13px}
.v4s .gfoot .muted {margin-left: auto}
.v4s .gline {margin: 0; font-size: 13px; max-width: 70ch}
.v4s .gact {display: flex; gap: 16px; justify-content: space-between}
.v4s .link.muted {color: var(--muted); font-weight: 500}
.v4s .tag2.g {background: var(--bar-bg); color: var(--muted)}
.v4s .gform {position: sticky; top: 16px; display: grid; gap: 4px; align-content: start}
.v4s .gform .picks button {font-weight: 500}
.v4s .field {display: grid; gap: 6px; font-size: 12.5px; color: var(--muted); margin-top: 12px}
.v4s .field input {border: 1px solid var(--btn-line); background: var(--surface-solid); color: var(--text); font: 500 14px var(--font); padding: 9px 12px; border-radius: 12px; min-width: 0}
.v4s .field input:focus-visible {outline: 2px solid var(--dark); outline-offset: 1px}
.v4s .btn.dark {background: var(--dark); color: var(--on-dark); border-color: var(--dark); margin-top: 16px; padding: 11px 16px; font-size: 14px}
@media (max-width: 900px) {
.v4s .gform {position: static}
.v4s .gnums b {font-size: 17px}
.v4s .gnums .now b {font-size: 21px}
}
.v4s .facts {list-style: none; margin: 10px 0 0; padding: 0; display: grid}
.v4s .facts li {display: grid; grid-template-columns: 28px minmax(0, 1fr) 14px; gap: 12px; align-items: start; padding: 12px 8px; border-top: 1px solid var(--line); border-radius: 12px; cursor: pointer; font-size: 14.5px; line-height: 1.45; transition: background .2s}
.v4s .facts li:first-child {border-top: 0}
.v4s .facts li:hover {background: var(--surface-solid)}
.v4s .facts li:hover .arrow {transform: translateX(3px)}
.v4s .facts .fn {width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--bar-bg); font-size: 12.5px; font-weight: 700}
.v4s .facts b {font-weight: 700}
.v4s .facts .arrow {color: var(--muted); transition: transform .2s; padding-top: 3px}
.v4s .exrank {display: grid; margin-top: 8px}
.v4s .exrank > div {display: grid; grid-template-columns: minmax(0, 1fr) auto 84px; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13.5px}
.v4s .exrank > div:first-child {border-top: 0}
.v4s .exrank .pill {justify-self: end}
.v4s .exrank .dots {display: flex; gap: 3px}
.v4s .exrank .dots i {width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: .3; animation: rise .4s both}
.v4s .exrank .dots i.own {background: var(--dark); opacity: 1; box-shadow: 0 0 0 2px var(--lime)}
.v4s .exgoals {display: grid; gap: 14px; margin-top: 10px}
.v4s .exgoals .t, .v4s .exgoals .s {display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px}
.v4s .exgoals .s {font-size: 12px; color: var(--muted); margin-top: 5px}
.v4s .exgoals .gtrack {height: 8px; margin-top: 6px}
@media (max-width: 900px) {
.v4s .exrank .dots {display: none}
.v4s .exrank > div {grid-template-columns: minmax(0, 1fr) auto}
}
@media print {
.aura, .v4app .side, .v4s .controls, .v4s .arrow, .v4s .go, .v4s .link, .v4s .all {display: none !important}
body {background: #fff !important}
.v4app {display: block; padding: 0}
.v4s.view > * {animation: none !important; break-inside: avoid}
.v4s .card {box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: #fff !important; border: 1px solid #ddd !important}
.v4s .half {grid-template-columns: 1fr 1fr}
.v4s .track i, .v4s .gtrack i, .v4s .stack i {transition: none}
* {-webkit-print-color-adjust: exact; print-color-adjust: exact}
}
.v4s .pstart {display: grid; gap: 6px; max-width: 760px}
.v4s .pin {display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap}
.v4s .pin input {flex: 1 1 260px; min-width: 0; border: 1px solid var(--btn-line); background: var(--surface-solid); color: var(--text); font: 500 16px var(--font); padding: 12px 16px; border-radius: 14px}
.v4s .pin input:focus-visible {outline: 2px solid var(--dark); outline-offset: 1px}
.v4s .psteps {list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px}
.v4s .psteps li {display: grid; gap: 8px; background: var(--surface-solid); border: 1px solid var(--line); border-radius: 16px; padding: 14px; font-size: 13px}
.v4s .psteps b {width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: #2a2926; font-size: 12.5px}
.v4s .prun {max-width: 760px}
.v4s .plog {display: grid; gap: 12px; margin-top: 14px}
.v4s .plog div {display: flex; gap: 12px; align-items: center; font-size: 14px; animation: rise .4s both}
.v4s .spin {width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--bar-bg); border-top-color: var(--dark); animation: turn .8s linear 1, okk .2s .8s forwards; flex: 0 0 18px; position: relative}
@keyframes turn { to { transform: rotate(360deg) } }
@keyframes okk { to { border-color: var(--lime); background: var(--lime) } }
.v4s .prow {display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 32px; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); transition: opacity .2s}
.v4s .prow:first-of-type {border-top: 0}
.v4s .prow .pl2 {display: grid; gap: 1px; min-width: 0}
.v4s .prow .pl2 .muted {font-size: 12px}
.v4s .prow .pl2 b {font-weight: 600; overflow-wrap: anywhere}
.v4s .prow .src {font-size: 11.5px; color: var(--muted); white-space: nowrap}
.v4s .prow.off {opacity: .45}
.v4s .prow.off b {text-decoration: line-through}
.v4s .pic {width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--bar-bg); font-size: 13px; font-weight: 700}
.v4s .tg {width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--btn-line); background: var(--lime); color: #2a2926; font-weight: 700; cursor: pointer}
.v4s .prow.off .tg {background: var(--surface-solid)}
.v4s .pchips {display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px}
.v4s .pchip {display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--btn-line); background: var(--lime-weak); color: var(--text); font: 500 13px var(--font); padding: 6px 8px 6px 12px; border-radius: 999px; cursor: pointer}
.v4s .pchip small {color: var(--muted); font-size: 11.5px}
.v4s .pchip i {font-style: normal; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-solid); font-size: 12px; color: var(--muted)}
.v4s .pchip.off {background: var(--surface-solid); color: var(--muted); text-decoration: line-through}
.v4s .pchip.off i {text-decoration: none}
.v4s .pchip.add {background: none; border-style: dashed; color: var(--muted); padding-right: 12px}
.v4s .pai {position: sticky; top: 16px; align-self: start; display: grid; gap: 12px; align-content: start}
.v4s .pprog .t {display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px}
.v4s .bub {background: var(--surface-solid); border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; padding: 11px 13px; font-size: 13.5px; line-height: 1.45; animation: rise .4s both}
.v4s .bub.me {justify-self: end; background: var(--dark); color: var(--on-dark); border-color: var(--dark); border-radius: 16px 16px 4px 16px}
.v4s .bact {display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px}
@media (max-width: 900px) {
.v4s .pai {position: static}
.v4s .psteps {grid-template-columns: 1fr}
.v4s .prow {grid-template-columns: 26px minmax(0, 1fr) 32px}
.v4s .prow .src {display: none}
}
.v4s button.tr {width: 100%; font: inherit; color: inherit; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); cursor: pointer; border-radius: 10px; transition: background .2s}
.v4s button.tr:hover {background: var(--surface-solid)}
.v4s.view.still > * {animation: none}
.v4s .exgrid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start}
.v4s .exgrid .span2 {grid-column: 1 / -1}
.v4s .exnote {border-left: 4px solid var(--lime)}
.v4s .exnote p {margin: 6px 0 0; font-size: 15px; font-weight: 500; max-width: 80ch; white-space: pre-line}
.v4s .exset-g {display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 24px; margin-top: 12px}
.v4s .lab2 {font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px}
.v4s .exb {display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 6px; background: var(--surface-solid); font-size: 13.5px}
.v4s .exb.off {opacity: .55}
.v4s .exb label, .v4s .exf {display: flex; gap: 8px; align-items: center; cursor: pointer}
.v4s .exb input, .v4s .exf input {accent-color: var(--dark); width: 16px; height: 16px; flex: 0 0 16px}
.v4s .mv {width: 26px; height: 26px; border: 1px solid var(--btn-line); background: var(--surface-solid); border-radius: 8px; cursor: pointer; color: var(--text); margin-left: 4px}
.v4s .mv:disabled {opacity: .35; cursor: default}
.v4s .exf {align-items: flex-start; font-size: 13px; line-height: 1.4; padding: 6px 0}
.v4s .exf input {margin-top: 2px}
.v4s .exset textarea {width: 100%; box-sizing: border-box; border: 1px solid var(--btn-line); background: var(--surface-solid); color: var(--text); font: 500 14px var(--font); padding: 10px 12px; border-radius: 12px; resize: vertical}
.v4s .exsend {display: grid; gap: 8px; margin-top: 6px}
.v4s .seg2 {display: flex; gap: 6px; flex-wrap: wrap}
.v4s .seg2 button {border: 1px solid var(--btn-line); background: var(--surface-solid); color: var(--text); font: 600 12.5px var(--font); padding: 6px 12px; border-radius: 999px; cursor: pointer}
.v4s .seg2 button.on {background: var(--dark); color: var(--on-dark); border-color: var(--dark)}
.v4s #exedit[aria-pressed="true"] {background: var(--dark); color: var(--on-dark); border-color: var(--dark)}
@media (max-width: 1100px) {
.v4s .exset-g {grid-template-columns: 1fr 1fr}
}
@media (max-width: 900px) {
.v4s .exgrid, .v4s .exset-g {grid-template-columns: 1fr}
}
@media print {
.v4s .exset, .v4s #exedit {display: none !important}
.v4s .exgrid {grid-template-columns: 1fr 1fr}
}
.v4s .goals {display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px}
.v4s .goal2 {display: grid; gap: 10px; align-content: start}
.v4s .g-h {display: flex; justify-content: space-between; align-items: start; gap: 10px}
.v4s .g-t {font-weight: 600; font-size: 15px}
.v4s .g-x {border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; opacity: 0; transition: opacity .2s}
.v4s .goal2:hover .g-x, .v4s .g-x:focus-visible {opacity: 1}
.v4s .g-v {display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap}
.v4s .g-v b {font-size: 34px; font-weight: 700; letter-spacing: -.01em}
.v4s .g-v span {color: var(--muted); font-size: 13px}
.v4s .goal2 .gtrack i {background: var(--bar)}
.v4s .goal2.to .gtrack i, .v4s .goal2.done .gtrack i {background: linear-gradient(90deg, var(--lime), var(--bar-own))}
.v4s .g-s {display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted)}
.v4s .g-st {display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-weight: 500}
.v4s .g-st i {width: 7px; height: 7px; border-radius: 50%; background: var(--bar)}
.v4s .goal2.to .g-st i {background: var(--lime)}
.v4s .goal2.done .g-st i {background: var(--dark)}
.v4s .goal2 .gline {color: var(--muted); font-size: 13px; line-height: 1.45}
.v4s .g-go {justify-self: start; padding: 0}
.v4s .gnew-row {display: grid; grid-template-columns: minmax(200px, 1.6fr) 90px minmax(120px, 1fr) minmax(140px, 1fr) auto; gap: 14px; align-items: end; margin-top: 4px}
.v4s .gnew-row .field {margin-top: 0}
.v4s .gnew-row .btn.dark {margin-top: 0}
.v4s .gnew select {border: 1px solid var(--btn-line); background: var(--surface-solid); color: var(--text); font: 500 14px var(--font); padding: 9px 12px; border-radius: 12px; min-width: 0}
.v4s .gnow {font-size: 20px; color: var(--text); padding: 6px 0}
.v4s #gopen[aria-pressed="true"] {opacity: .7}
@media (max-width: 900px) {
.v4s .gnew-row {grid-template-columns: 1fr 1fr}
.v4s .gnew-row .field:first-child, .v4s .gnew-row .btn {grid-column: 1 / -1}
.v4s .g-x {opacity: 1}
.v4s .goals {grid-template-columns: 1fr}
}
@media (max-width: 600px) {
.v4s .tiles {grid-template-columns: 1fr 1fr; gap: 12px}
.v4s .tile .top {flex-wrap: wrap; align-items: flex-start}
.v4s .tile .big {font-size: 26px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px}
.v4s .tile .big .cnt {white-space: nowrap}
.v4s .tile .big small {margin: 0}
.v4s .dirs {grid-template-columns: 1fr 1fr; gap: 10px}
.v4s .dir {padding: 12px}
.v4s .dir .n {font-size: 22px}
.v4s .dir .pill {font-size: 10.5px; padding: 2px 7px}
.v4s .tt .th, .v4s .tt .tr {grid-template-columns: minmax(0, 1.6fr) 64px 56px; gap: 8px}
}
.v4s .gnew select, .v4s .gnew .field input {height: 42px; box-sizing: border-box}
.v4s #odmap {height: 62vh; min-height: 380px; border-radius: 20px; overflow: hidden; margin-top: 14px; background: var(--bar-bg); border: 1px solid var(--line)}
.v4s .od-k button i {width: 9px; height: 9px; border-radius: 50%; display: inline-block}
.v4s .od-k button.on i {box-shadow: 0 0 0 2px #fff}
.v4s .od-cl {display: grid; place-items: center; border-radius: 50%; color: #fff; font: 600 12px/1 var(--font); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3)}
.v4s .od-pop {max-width: 280px; font: 13px/1.45 var(--font)}
.v4s .od-pop img {width: 100%; height: 140px; object-fit: cover; border-radius: 10px; margin-bottom: 6px; background: #eee}
.v4s .od-pop .o {border-top: 1px solid #e5e5e5; padding-top: 6px; margin-top: 6px}
.v4s .od-pop .m {color: #666; font-size: 12px}
.v4s .leaflet-container {font-family: var(--font)}
@media print {
.v4s #odmap {display: none}
}
.v4s #odmap.od-gray .leaflet-tile-pane {filter: grayscale(.9) contrast(.88) brightness(1.06)}
.v4s #odmap.od-dark .leaflet-tile-pane {filter: invert(1) hue-rotate(180deg) grayscale(.85) brightness(.85) contrast(.9)}
.v4s .gtab {display: grid; margin-top: 10px}
.v4s .gtab .th, .v4s .gtab .tr {display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(56px, .6fr)); gap: 10px; align-items: center; padding: 10px 4px; border-top: 1px solid var(--line); font-size: 13.5px}
.v4s .gtab .th {color: var(--muted); font-size: 11.5px; font-weight: 600; border-top: 0}
.v4s .gtab .num {text-align: right}
.v4s .yb {display: flex; gap: 10px; align-items: flex-end; height: 150px; margin-top: 12px}
.v4s .yb .y {flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; font-size: 12px}
.v4s .yb .y i {width: 100%; max-width: 44px; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, var(--bar), color-mix(in srgb, var(--bar) 55%, transparent)); animation: grow .7s cubic-bezier(.2,.8,.2,1) both; transform-origin: bottom}
.v4s .yb .n {font-weight: 700}
.v4s .sb {margin-top: 16px; display: grid; gap: 8px}
.v4s .gf {display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 12px}
.v4s .stars {color: var(--text); letter-spacing: 1px; font-size: 12px}
.v4s .st-off {color: var(--bar-bg)}
.v4s .rec .rep {color: var(--muted); border-left: 3px solid var(--line); padding-left: 10px; margin-top: 4px}
@media (max-width: 600px) {
.v4s .gtab .th, .v4s .gtab .tr {grid-template-columns: minmax(0, 1.4fr) repeat(4, 46px); gap: 6px; font-size: 12.5px}
}
.v4s .cd-filter {margin: 4px 0 18px}
.v4s .cd {display: grid; grid-template-columns: 30px 1fr; gap: 6px}
.v4s .cd-axis {position: relative; height: 240px; margin-bottom: 74px}
.v4s .cd-axis span {position: absolute; right: 4px; transform: translateY(50%); font-size: 11px; color: var(--muted)}
.v4s .cd-cols {position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(46px, 1fr); gap: 6px; overflow-x: auto}
.v4s .cd-col {min-width: 0; display: grid; gap: 8px; align-content: start}
.v4s .cd-plot {position: relative; height: 240px; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to top, transparent 0, transparent calc(var(--g) - 1px), color-mix(in srgb, var(--line) 60%, transparent) calc(var(--g) - 1px), color-mix(in srgb, var(--line) 60%, transparent) var(--g))}
.v4s .cd-bar {position: relative; width: min(30px, 70%); min-height: 2px; background: var(--bar, #c9d3df); border-radius: 7px 7px 2px 2px}
.v4s .cd-col.own .cd-bar {background: var(--lime)}
.v4s .cd-bar b {position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding-bottom: 3px; font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap}
.v4s .cd-col.own .cd-bar b {color: var(--text)}
.v4s .cd-name {display: grid; justify-items: center; gap: 4px; font-size: 10.5px; line-height: 1.2; text-align: center; color: var(--muted); min-height: 64px; overflow-wrap: break-word}
.v4s .cd-col.own .cd-name {color: var(--text); font-weight: 600}
@media (max-width: 720px) {
.v4s .cd-plot, .v4s .cd-axis {height: 190px}
.v4s .cd-cols {grid-auto-columns: 50px}
.v4s .cd-filter {flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px}
.v4s .cd-filter button {flex: none}
}
.v4s .cd-col.foc .cd-bar {background: var(--dark)}
.v4s .cd-col.foc .cd-bar b, .v4s .cd-col.foc .cd-name {color: var(--text); font-weight: 600}
.v4s .cd-axis span {white-space: nowrap}
.v4s .cd {grid-template-columns: auto 1fr}
.v4s .cd-axis {min-width: 30px; padding-left: 4px}
.v4s .tile.pick {cursor: pointer}
.v4s .tile.pick.on {box-shadow: 0 0 0 2px var(--dark) inset, var(--shadow)}
.v4s .two.even {grid-template-columns: repeat(2, minmax(0, 1fr))}
.v4s .dl {display: grid; margin-top: 10px}
.v4s .dl-r {display: grid; min-height: 52px; box-sizing: border-box; grid-template-columns: minmax(0, 1.25fr) minmax(48px, 1fr) 34px 48px; gap: 12px; align-items: center; width: 100%; padding: 9px 10px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background .2s}
.v4s .dl-r:first-child {border-top: 0}
.v4s .dl-r:hover {background: var(--surface-2); border-radius: 12px}
.v4s .dl-r.on {background: var(--surface-2); border-radius: 12px; box-shadow: inset 3px 0 0 var(--dark)}
.v4s .dl-r .t {font-weight: 600; font-size: 13.5px; min-width: 0}
.v4s .dl-r .t small {display: block; font-weight: 400; color: var(--muted); font-size: 11.5px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.v4s .dl-r .v {text-align: right; font-weight: 600}
.v4s .dl-r .pill {justify-self: end}
.v4s .dl-r .track.ownt i {background: linear-gradient(90deg, var(--lime), var(--bar-own))}
.v4s .row.foc {background: var(--surface-2)}
.v4s .row.foc .b {font-weight: 700}
.v4s .row.foc .track i {background: var(--dark)}
.v4s .bsel select {appearance: none; -webkit-appearance: none; border: 1px solid var(--btn-line); background: var(--surface-solid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center; color: var(--text); font: 600 12.5px var(--font); padding: 8px 34px 8px 16px; border-radius: 999px; cursor: pointer}
.v4s .bsel select:hover {border-color: var(--muted)}
.v4s .vh {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0)}
@media (max-width: 900px) {
.v4s .two.even {grid-template-columns: 1fr}
}
@media (max-width: 520px) {
.v4s .dl-r {grid-template-columns: minmax(0, 1fr) 30px 44px}
.v4s .dl-r .track {display: none}
}
.v4s .rate {margin-top: 12px}
.v4s .row.pickrow {width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer}
.v4s .row.pickrow.own {background: var(--lime-weak)}
.v4s .row.pickrow:hover {background: var(--surface-2)}
.v4s .row.pickrow.on {background: var(--surface-2); box-shadow: inset 3px 0 0 var(--dark)}
.v4s .row.pickrow.own.on {background: var(--lime-weak)}
.v4s .row .dn {display: grid; min-width: 0; font-weight: 600}
.v4s .row .dn small {font-weight: 400; color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.v4s .row .v small {display: block; font-weight: 400; color: var(--muted); font-size: 11px}
.v4s .row .stack {height: 8px}
@media (max-width: 900px) {
.v4s .grid-rate .stack {display: flex !important; grid-column: 2 / -1; order: 9}
}
.v4s .row.ownt .track i {background: linear-gradient(90deg, var(--lime), var(--bar-own))}
.v4s .fbar {display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 12px}
.v4s .fbar + .fbar {margin-top: 8px}
.v4s .fbar .fl {font-size: 11.5px; font-weight: 600; color: var(--muted); padding-top: 8px}
.v4s .fbar .picks {gap: 6px}
.v4s .fbar .picks button {padding: 6px 12px}
.v4s .fbar .picks button .logo.sm, .v4s .fbar .picks button .bdot {margin-left: -4px}
.v4s .fcard {padding: 6px 22px 16px}
.v4s .fbar + .rate {margin-top: 16px}
@media (max-width: 720px) {
.v4s .fbar {grid-template-columns: 1fr; gap: 6px}
.v4s .fbar .fl {padding-top: 0}
.v4s .fbar .picks {flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none}
.v4s .fbar .picks button {flex: none}
}
.v4s .grid-rate.dgrid {grid-template-columns: 34px minmax(160px, 1.7fr) minmax(40px, 1fr) repeat(2, minmax(44px, auto))}
@media (max-width: 900px) {
.v4s .grid-rate.dgrid {grid-template-columns: 26px minmax(0, 1fr) repeat(2, auto)}
}
.v4s .tiles.five {grid-template-columns: repeat(5, minmax(0, 1fr))}
.v4s .tile.go {cursor: pointer}
.v4s .otop {display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.6}
.v4s .otop .fl {font-size: 11.5px; font-weight: 600; color: var(--muted); padding-top: 1px}
.v4s .otop i {font-style: normal; color: var(--muted); margin: 0 7px}
.v4s .pg-row {display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-top: 14px; font-size: 13.5px}
.v4s .pg-row b {font-weight: 700}
.v4s .fcard .picks {flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent)}
.v4s .fcard .picks button {flex: none}
@media (max-width: 1200px) {
.v4s .tiles.five {grid-template-columns: repeat(3, minmax(0, 1fr))}
}
@media (max-width: 900px) {
.v4s .tiles.five {grid-template-columns: 1fr 1fr}
.v4s .tiles.five > :last-child {grid-column: 1 / -1}
.v4s .pg-row {grid-template-columns: 1fr auto}
.v4s .pg-row .gtrack {grid-column: 1 / -1; order: 3}
}
@media (min-width: 901px) {
.v4s .tiles.five .big {font-size: 34px; white-space: nowrap}
}
.v4s .tiles.five {gap: 14px}
.v4s .tiles.five .tile {padding: 20px 20px 18px}
.v4s .tiles.five .pill {font-size: 11px; padding: 2px 9px}
.v4s .tiles.five .foot {margin-top: 8px}
.v4s .grid-rate.sgrid {grid-template-columns: minmax(220px, 1.7fr) minmax(60px, 1fr) 52px 92px 92px}
.v4s .row.sgrid .dn small {white-space: normal}
.v4s .evcard {align-self: start}
.v4s .thead.sgrid span:nth-child(2) {font-weight: 500}
.v4s .row.sgrid .plc {color: var(--text); font-weight: 600}
.v4s .row.sgrid.few .track, .v4s .row.sgrid.few .dn {opacity: .55}
.v4s .row.sgrid.few .plc {color: var(--muted); font-weight: 500}
.v4s .card .week {margin-top: 14px}
.v4s .ev.go {cursor: pointer; border-radius: 12px; transition: background .2s}
.v4s .ev.go:hover {background: var(--surface-2)}
@media (max-width: 900px) {
.v4s .grid-rate.sgrid {grid-template-columns: minmax(0, 1fr) auto auto}
.v4s .grid-rate.sgrid .track, .v4s .grid-rate.sgrid > :nth-child(4) {display: none}
}
.v4s .row.dgrid .s:last-child {color: var(--text); font-weight: 600}
.v4s .grid-rate.dgrid {grid-template-columns: 34px minmax(160px, 1.7fr) minmax(40px, 1fr) repeat(3, minmax(44px, auto))}
.v4s .row .vw small {display: block; font-size: 10.5px; color: var(--muted)}
.v4s .two.even .grid-rate:not(.dgrid) {grid-template-columns: 30px minmax(110px, 1.3fr) minmax(36px, 1fr) repeat(var(--cols, 2), minmax(42px, auto)); gap: 10px}
.v4s .two.even .grid-rate:not(.dgrid) {grid-template-columns: 30px minmax(110px, 1.3fr) minmax(36px, 1fr) repeat(var(--cols, 2), 52px)}
.v4s .two.even .grid-rate[style*="--cols:3"]:not(.dgrid) {grid-template-columns: 30px minmax(110px, 1.3fr) minmax(36px, 1fr) 44px 40px 52px 62px}
.v4s .two.even .grid-rate[style*="--cols:3"]:not(.dgrid) {grid-template-columns: 30px minmax(0, 1fr) 44px 44px 56px 72px}
.v4s .two.even .grid-rate[style*="--cols:3"]:not(.dgrid) .track, .v4s .two.even .thead.grid-rate[style*="--cols:3"]:not(.dgrid) > :nth-child(3) {display: none}
.v4s .two.even .grid-rate .s, .v4s .two.even .grid-rate .v {white-space: nowrap}
.v4s .dstack {display: grid; gap: 20px}
.v4s .few {color: var(--muted); font-size: 11px; font-weight: 400}
.v4s .card .lead {margin: 6px 0 4px; font-size: 19px; line-height: 1.35; font-weight: 600; letter-spacing: -.01em; color: var(--text); text-wrap: balance}
.v4s .row .dn small.ld {margin-top: 1px}
.v4s .nw {white-space: nowrap}
.v4s .row.sgrid .plc {display: grid; justify-items: end; line-height: 1.15}
.v4s .row.sgrid .plc b {font-size: 17px; font-weight: 700; color: var(--text)}
.v4s .row.sgrid .plc small {font-size: 11px; color: var(--muted); font-weight: 500}
.v4s .row.sgrid .v {font-size: 15px; font-weight: 700}
.v4s .row.sgrid .s:not(.plc) {color: var(--muted)}
.v4s .row.sgrid {padding-top: 11px; padding-bottom: 11px}
.v4s .card h2 {text-wrap: balance}
.v4s .note, .v4s .ev p {text-wrap: pretty}
.v4s .ev .h {font-size: 14px}
.v4s .ev p {font-size: 13px; line-height: 1.45}
.v4s .grid-rate.dgrid {grid-template-columns: 34px minmax(170px, 1.7fr) minmax(40px, 1fr) 48px 96px 64px}
.v4s .row .plc {display: grid; justify-items: end; line-height: 1.15}
.v4s .row .plc b {font-size: 17px; font-weight: 700; color: var(--text)}
.v4s .row .plc small {font-size: 11px; color: var(--muted); font-weight: 500}
.v4s .row.dgrid .v {font-size: 15px; font-weight: 700}
.v4s .row .vw {display: grid; justify-items: end; line-height: 1.2}
.v4s .dstack .grid-rate[style*="--cols:5"] {grid-template-columns: 34px minmax(150px, 1.3fr) minmax(60px, 1fr) 52px 52px 60px 80px 96px}
.v4s .dstack .grid-rate[style*="--cols:1"] {grid-template-columns: 34px minmax(150px, 1.3fr) minmax(60px, 1fr) 110px}
.v4s .mgrid {display: grid; grid-template-columns: minmax(0, 1fr) 120px 110px 110px; gap: 12px; align-items: center}
.v4s .thead.mgrid {padding: 0 12px 6px}
.v4s .row.mgrid {padding: 11px 12px}
.v4s .row.mgrid .v {font-size: 16px; font-weight: 700}
.v4s .row.mgrid .s {color: var(--muted); font-size: 14px}
.v4s .row.mgrid .dn {font-weight: 600}
.v4s .na {color: var(--muted); opacity: .6}
@media (max-width: 900px) {
.v4s .mgrid {grid-template-columns: minmax(0, 1fr) 80px 70px 70px}
}
.v4s .mhead {margin-top: 10px}
.v4s .mgroup {margin-top: 18px}
.v4s .mgroup:first-of-type {margin-top: 6px}
.v4s .mgroup .gh {display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 0 12px 6px; border-bottom: 1px solid var(--line)}
.v4s .mgroup .gh b {font-size: 13px; letter-spacing: .04em; text-transform: uppercase}
.v4s .mgroup .gh span {font-size: 12px; color: var(--muted)}
.v4s .mgroup .rate {margin-top: 4px}
.v4s .row.mgrid .dn small {white-space: normal}
.v4s .row.exp .chev {display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(45deg) translateY(-3px); transition: transform .2s}
.v4s .row.exp.open .chev {transform: rotate(-135deg) translate(-2px, -1px)}
.v4s .row.subrow {padding: 6px 12px 6px 28px; font-size: 13.5px; color: var(--muted)}
.v4s .row.subrow .dn {font-weight: 500; color: var(--text)}
.v4s .row.subrow .v {font-size: 14px; font-weight: 600}
.v4s .mgrid.m4 {grid-template-columns: minmax(0, 1fr) 80px 80px 110px 100px}
.v4s .mgrid.mc0 {grid-template-columns: minmax(0, 1fr) 180px}
.v4s .mgrid.mc1 {grid-template-columns: minmax(0, 1fr) 120px 150px}
.v4s .mgrid.mc2 {grid-template-columns: minmax(0, 1fr) 120px 110px 110px}
.v4s .row.mgrid .v {display: grid; justify-items: end; line-height: 1.2}
.v4s .row.mgrid .v small.past {font-size: 11px; font-weight: 500; color: var(--muted); margin-top: 2px; white-space: nowrap}
.v4s .mgrid.mc3 {grid-template-columns: minmax(0, 1fr) 110px 100px 120px 100px}
.v4s .mgrid.m5 {grid-template-columns: minmax(0, 1fr) 64px 70px 104px 96px 80px}
.v4s .row .us {color: var(--text); font-weight: 600; background: var(--lime-weak); border-radius: 8px; padding: 2px 8px}
.v4s .dstack .grid-rate[style*="--cols:5"] {grid-template-columns: 34px minmax(150px, 1.3fr) minmax(60px, 1fr) 52px 52px 60px 96px 90px}
.v4s .fcard .picks {scrollbar-width: none; -webkit-mask-image: none; mask-image: none; padding-bottom: 0; scroll-behavior: auto}
.v4s .fcard .picks::-webkit-scrollbar {display: none}
.v4s .fcard .hs {position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; min-width: 0}
.v4s .hs-b {width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--btn-line); background: var(--surface-solid); color: var(--text); font: 600 16px/1 var(--font); cursor: pointer; display: grid; place-items: center; transition: opacity .2s}
.v4s .hs-b:hover {border-color: var(--muted)}
.v4s .hs.at-l .hs-b.l, .v4s .hs.at-r .hs-b.r {opacity: .3; pointer-events: none}
.v4s .fcard .hs .picks {-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent); padding: 2px 8px}
.v4s .fcard .hs.at-l .picks {-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent)}
.v4s .fcard .fbar {align-items: center}
.v4s .fcard .fbar .fl {padding-top: 0}
.v4s .fcard {padding: 16px}
.v4s .btiles {display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px}
.v4s .bt {display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 12px; border: 1px solid var(--btn-line); border-radius: 14px; background: var(--surface-solid); color: var(--text); font: 600 13px var(--font); text-align: left; cursor: pointer; transition: border-color .2s, background .2s}
.v4s .bt span:last-child {overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.v4s .bt:hover {border-color: var(--muted)}
.v4s .bt.on {background: var(--dark); border-color: var(--dark); color: var(--on-dark)}
.v4s .bt .logo, .v4s .bt .av {flex: 0 0 26px; width: 26px; height: 26px}
.v4s .btiles {display: flex; flex-wrap: wrap; gap: 8px}
.v4s .bt {flex: 1 1 auto; justify-content: center; padding: 8px 12px}
.v4s .bt span:last-child {overflow: visible}
.v4s .btiles {display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px}
.v4s .bt {flex-direction: column; justify-content: flex-start; gap: 7px; padding: 12px 6px 10px; text-align: center; font-size: 12px; line-height: 1.25}
.v4s .bt span:last-child {white-space: normal; overflow-wrap: anywhere; overflow: visible}
.v4s .bt .logo, .v4s .bt .av {flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px}
@media (max-width: 1200px) {
.v4s .btiles {grid-template-columns: repeat(6, minmax(0, 1fr))}
}
@media (max-width: 700px) {
.v4s .btiles {grid-template-columns: repeat(4, minmax(0, 1fr))}
}
.v4s .mgrid.t6 {grid-template-columns: minmax(0, 1fr) repeat(6, 104px); gap: 6px}
.v4s .thead.t6 {align-items: end; padding-bottom: 10px}
.v4s .ch {display: grid; justify-items: center; gap: 5px; padding: 6px 4px; border: 0; border-radius: 12px; background: none; color: var(--muted); font: 600 11.5px/1.2 var(--font); text-align: center; cursor: pointer; text-transform: none; letter-spacing: 0}
.v4s .ch:hover:not(:disabled) {background: var(--surface-2); color: var(--text)}
.v4s .ch:disabled {cursor: default}
.v4s .ch .logo, .v4s .ch .av {width: 28px; height: 28px; flex-basis: 28px}
.v4s .ch.sel {background: var(--dark); color: var(--on-dark)}
.v4s .ch.me {color: var(--text)}
.v4s .row.t6 .c6 {text-align: center; justify-self: stretch; padding: 4px 0; border-radius: 8px}
.v4s .row.t6 .c6.sel {background: var(--surface-2); color: var(--text); font-weight: 700}
.v4s .row.t6 .c6 .us {display: inline-block}
.v4s .fcard .fh {display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 2px 4px 12px}
.v4s .fcard .fh b {font-size: 15px}
.v4s .fcard .fh span {font-size: 12.5px; color: var(--muted)}
.v4s .bt {position: relative}
.v4s .bt .nb {position: absolute; top: 6px; right: 7px; width: 18px; height: 18px; border-radius: 50%; background: var(--on-dark); color: var(--dark); font: 700 11px/18px var(--font); font-style: normal; text-align: center}
.v4s .bt.full {opacity: .45; cursor: not-allowed}
.v4s .bt.full:hover {border-color: var(--btn-line)}
.v4s .mgrid.t1 {grid-template-columns: minmax(0, 1fr) 110px; gap: 6px}
.v4s .mgrid.t2 {grid-template-columns: minmax(0, 1fr) repeat(2, 110px); gap: 6px}
.v4s .mgrid.t3 {grid-template-columns: minmax(0, 1fr) repeat(3, 110px); gap: 6px}
.v4s .mgrid.t4 {grid-template-columns: minmax(0, 1fr) repeat(4, 108px); gap: 6px}
.v4s .mgrid.t5 {grid-template-columns: minmax(0, 1fr) repeat(5, 106px); gap: 6px}
.v4s .thead[class*=" t"] {align-items: end; padding-bottom: 10px}
.v4s .row[class*=" t"] .c6 {text-align: center; justify-self: stretch; padding: 4px 0; border-radius: 8px}
.v4s .row[class*=" t"] .c6.sel {background: var(--surface-2); color: var(--text); font-weight: 700}
.v4s .rate > .row.mgrid, .v4s .rate > .row.grid-rate {border-radius: 0; border-top: 1px solid var(--line)}
.v4s .rate > .row.mgrid:first-child, .v4s .rate > .thead + .row.mgrid, .v4s .rate > .row.grid-rate:first-child, .v4s .rate > .thead + .row.grid-rate {border-top: 0}
.v4s .rate > .row.subrow {border-top: 1px dashed var(--line)}
.v4s .rate > .row.mgrid:hover, .v4s .rate > .row.grid-rate:hover {border-radius: 10px}
.v4s .rate > .row.mgrid:hover + .row, .v4s .rate > .row.grid-rate:hover + .row {border-top-color: transparent}
.v4s .mgroup .gh {border-bottom-color: color-mix(in srgb, var(--text) 18%, transparent)}
.v4s .mgrid.ad4 {grid-template-columns: minmax(0, 1.1fr) minmax(40px, 1fr) 96px 64px minmax(0, 1.2fr)}
.v4s .row .ld2 {display: flex; align-items: center; gap: 6px; justify-content: flex-end; min-width: 0; font-size: 12.5px; color: var(--muted)}
.v4s .row .ld2 span:last-child {overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.v4s .mgrid.ad4 {grid-template-columns: minmax(0, 1fr) minmax(80px, 1.4fr) 110px 80px 200px}
.v4s .dstack .grid-rate[style*="--cols:3"] {grid-template-columns: 34px minmax(150px, 1.2fr) minmax(80px, 1.6fr) 100px 130px 120px}
.v4s .dstack .two .grid-rate[style*="--cols:3"] {grid-template-columns: 30px minmax(110px, 1.3fr) minmax(36px, 1fr) 76px 64px 72px; gap: 10px}
.v4s .dstack .two .grid-rate .s, .v4s .dstack .two .grid-rate .v {white-space: nowrap}
.v4s .dstack .two .grid-rate[style*="--cols:1"] {grid-template-columns: 30px minmax(110px, 1.4fr) minmax(36px, 1fr) 72px; gap: 10px}
.v4s .mgrid.ad4 {grid-template-columns: minmax(0, .9fr) minmax(60px, 1fr) 100px 70px minmax(330px, 1.6fr)}
.v4s .top3 {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px}
.v4s .t3 {display: flex; align-items: center; gap: 5px; min-width: 0; padding: 3px 8px; border-radius: 8px; background: var(--surface-2); font-size: 12px}
.v4s .t3 span:not(.logo):not(.bdot) {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto}
.v4s .t3 b {font-weight: 700}
.v4s .t3.me {background: var(--lime-weak)}
.v4s .subsw {display: inline-flex; gap: 4px; padding: 4px; margin: -4px 0 18px; border: 1px solid var(--btn-line); border-radius: 999px; background: var(--surface-solid)}
.v4s .subsw button {border: 0; background: none; color: var(--muted); font: 600 13px var(--font); padding: 8px 18px; border-radius: 999px; cursor: pointer}
.v4s .subsw button:hover {color: var(--text)}
.v4s .subsw button.on {background: var(--dark); color: var(--on-dark)}
.v4s .perwarn {margin: -6px 0 16px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); color: var(--muted); font-size: 12.5px}
.v4s .mgrid.evg {grid-template-columns: 180px 100px minmax(0, 1fr)}
.v4s .row.evg .b {display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 600}
.v4s .row.evg .et {font-size: 13px; color: var(--text); line-height: 1.45}
.v4s .row.pickrow[data-go], .v4s .row.pickrow[data-dgo], .v4s .row.pickrow[data-dk] {position: relative; padding-right: 30px}
.v4s .row.pickrow[data-go]::after, .v4s .row.pickrow[data-dgo]::after, .v4s .row.pickrow[data-dk]::after {content: "›"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 16px; transition: transform .2s}
.v4s .row.pickrow:hover::after {transform: translate(3px, -50%); color: var(--text)}
.v4s .row.pickrow[data-sx] {padding-right: 30px}
@media (max-width: 900px) {
.v4s .mgrid.evg {grid-template-columns: 1fr; gap: 4px}
}
.v4s .subsw {justify-self: start; width: max-content}
.v4s .rp-tabs {display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 18px}
.v4s .rp-tabs button {display: grid; gap: 1px; text-align: left; padding: 9px 16px; border: 1px solid var(--btn-line); border-radius: 14px; background: var(--surface-solid); color: var(--text); font: 600 13px var(--font); cursor: pointer}
.v4s .rp-tabs button small {font-weight: 500; font-size: 11.5px; color: var(--muted)}
.v4s .rp-tabs button.on {background: var(--dark); border-color: var(--dark); color: var(--on-dark)}
.v4s .rp-tabs button.on small {color: color-mix(in srgb, var(--on-dark) 70%, transparent)}
.v4s .rp-tabs .rp-new {place-items: center; border-style: dashed; color: var(--muted)}
.v4s .rp-wrap {display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start}
.v4s .rp-wrap.with-set {grid-template-columns: minmax(0, 1fr) 360px}
.v4s .rp-sheet {background: var(--surface-solid); border: 1px solid var(--line); border-radius: 18px; padding: 44px 52px; box-shadow: 0 1px 0 var(--line), 0 18px 40px -24px rgba(20, 30, 50, .25); max-width: 920px; width: 100%; justify-self: center; box-sizing: border-box}
.v4s .rp-cover {padding-bottom: 22px; margin-bottom: 8px; border-bottom: 2px solid var(--text)}
.v4s .rp-logo {display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px}
.v4s .rp-cover h1 {font-size: 30px; line-height: 1.15; letter-spacing: -.02em; margin: 18px 0 10px; text-wrap: balance}
.v4s .rp-meta {display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--muted); font-size: 13px}
.v4s .rp-sec {padding: 22px 0; border-top: 1px solid var(--line)}
.v4s .rp-cover + .rp-sec {border-top: 0}
.v4s .rp-sec h2 {display: flex; align-items: baseline; gap: 10px; font-size: 18px; margin: 0 0 4px; text-wrap: balance}
.v4s .rp-n {font: 700 12px/1 var(--font); color: var(--muted); min-width: 18px}
.v4s .rp-sub {margin: 0 0 12px; font-size: 12.5px; color: var(--muted)}
.v4s .rp-note {margin: 6px 0 0; font-size: 15px; line-height: 1.6; max-width: 68ch; text-wrap: pretty}
.v4s .rp-kpi {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 14px; overflow: hidden}
.v4s .rp-kpi > div {display: grid; gap: 4px; padding: 14px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line)}
.v4s .rp-kpi > div:nth-child(3n) {border-right: 0}
.v4s .rp-kpi > div:nth-last-child(-n+3):nth-child(3n+1), .v4s .rp-kpi > div:nth-last-child(-n+3):nth-child(3n+1) ~ div {border-bottom: 0}
.v4s .rp-kpi span {font-size: 12.5px; color: var(--muted)}
.v4s .rp-kpi b {font-size: 26px; font-weight: 700; letter-spacing: -.01em}
.v4s .rp-kpi small {font-size: 11.5px; color: var(--muted)}
.v4s .rp-grp {margin-top: 10px}
.v4s .rp-grp > b {display: block; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; padding: 8px 0 6px; border-bottom: 1px solid color-mix(in srgb, var(--text) 18%, transparent)}
.v4s .rp-row {display: grid; grid-template-columns: minmax(0, 1fr) 110px 110px; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px}
.v4s .rp-row span small {display: block; font-size: 11.5px; color: var(--muted)}
.v4s .rp-row .was {color: var(--muted); text-align: right}
.v4s .rp-row b {text-align: right}
.v4s .rp-row:has(> span:first-child + b) {grid-template-columns: minmax(0, 1fr) 110px}
.v4s .rp-goal {display: grid; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line)}
.v4s .rp-goal > div:first-child {display: flex; justify-content: space-between; gap: 10px; font-size: 14px}
.v4s .rp-goal small {color: var(--muted); font-size: 12px}
.v4s .rp-tw {overflow-x: auto}
.v4s .rp-t {width: 100%; border-collapse: collapse; font-size: 13.5px}
.v4s .rp-t th {font-size: 11.5px; font-weight: 600; color: var(--muted); text-align: right; padding: 6px 8px; vertical-align: bottom}
.v4s .rp-t th:first-child {text-align: left}
.v4s .rp-t th .logo, .v4s .rp-t th .av {display: block; margin: 0 0 4px auto; width: 22px; height: 22px; flex-basis: 22px}
.v4s .rp-t td {padding: 8px; border-top: 1px solid var(--line); text-align: right}
.v4s .rp-t td:first-child {text-align: left}
.v4s .rp-t td.me {font-weight: 700; background: var(--lime-weak)}
.v4s .rp-ev {display: grid; grid-template-columns: 26px 110px auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px}
.v4s .rp-att {display: grid; gap: 4px; padding: 14px 16px; border-radius: 12px; background: var(--peach); color: var(--peach-ink)}
.v4s .rp-att span {font-size: 13px}
.v4s .rp-foot {margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted)}
.v4s .rp-sheet.brief .rp-sec {padding: 14px 0}
.v4s .rp-sheet.brief .rp-row small, .v4s .rp-sheet.brief .rp-sub {display: none}
.v4s .rp-sheet.brief .rp-kpi b {font-size: 22px}
.v4s .rp-set {position: sticky; top: 20px; display: grid; gap: 0; padding: 18px 18px 14px; max-height: calc(100vh - 40px); overflow: auto}
.v4s .rs-h {display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px}
.v4s .rs-h .btn {margin: 0; padding: 8px 14px}
.v4s .rs-s {display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--line)}
.v4s .rs-t {font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted)}
.v4s .rs-sub {font-size: 12px; color: var(--muted); margin-top: 2px}
.v4s .rs-f {display: grid; gap: 4px; font-size: 12px; color: var(--muted)}
.v4s .rs-f input, .v4s .rp-set textarea {box-sizing: border-box; width: 100%; border: 1px solid var(--btn-line); border-radius: 10px; padding: 8px 10px; font: 500 13.5px var(--font); background: var(--surface-solid); color: var(--text)}
.v4s .rs-row {display: flex; gap: 14px}
.v4s .rs-lnk {border: 0; background: none; padding: 0; font: 600 12.5px var(--font); color: var(--text); cursor: pointer; text-decoration: underline; text-underline-offset: 3px}
.v4s .rs-lnk.del {color: var(--peach-ink)}
.v4s .rs-chk {display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer}
.v4s .rs-b {border: 1px solid var(--line); border-radius: 12px; background: var(--surface-solid)}
.v4s .rs-b.off {opacity: .6}
.v4s .rs-b.open {border-color: var(--muted)}
.v4s .rs-bh {display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 8px 7px 10px}
.v4s .rs-bh label {display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer}
.v4s .rs-mv {display: flex; gap: 2px}
.v4s .rs-mv button {width: 26px; height: 26px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; font: 600 14px var(--font)}
.v4s .rs-mv button:hover:not(:disabled) {background: var(--surface-2); color: var(--text)}
.v4s .rs-mv button:disabled {opacity: .3}
.v4s .rs-bo {display: grid; gap: 6px; padding: 4px 10px 12px}
.v4s .rs-pick {display: flex; flex-wrap: wrap; gap: 5px}
.v4s .rs-pick button {border: 1px solid var(--btn-line); background: var(--surface-solid); color: var(--text); border-radius: 999px; padding: 4px 10px; font: 500 12px var(--font); cursor: pointer}
.v4s .rs-pick button.on {background: var(--dark); border-color: var(--dark); color: var(--on-dark)}
.v4s .rs-pick button:disabled {opacity: .35; cursor: not-allowed}
.v4s .rp-set .seg2 {display: flex; flex-wrap: wrap; gap: 4px}
.v4s .rp-set .seg2 button {flex: 1 1 auto}
@media (max-width: 1200px) {
.v4s .rp-wrap.with-set {grid-template-columns: 1fr}
.v4s .rp-set {position: static; max-height: none}
}
@media (max-width: 700px) {
.v4s .rp-sheet {padding: 26px 20px}
.v4s .rp-kpi {grid-template-columns: 1fr 1fr}
}
.v4s .exban {display: flex; gap: 12px; align-items: baseline; margin: -6px 0 16px; padding: 12px 16px; border-radius: 14px; background: var(--peach); color: var(--peach-ink); font-size: 13px}
.v4s .exban b {flex: none; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase}
.v4s .mgrid.mch {grid-template-columns: minmax(0, 1.4fr) repeat(6, minmax(70px, 1fr))}
.v4s .mgrid.mdir {grid-template-columns: minmax(0, 1.2fr) repeat(5, minmax(80px, 1fr))}
.v4s .mgrid.mcamp {grid-template-columns: minmax(0, 1.6fr) repeat(7, minmax(62px, 1fr)) 96px}
.v4s .mgrid.msrc {grid-template-columns: minmax(0, 1fr) 160px 140px}
.v4s .mgrid.msp {grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 100px}
.v4s .mgrid.mec {grid-template-columns: minmax(0, 1fr) 110px 90px 90px}
.v4s .thead.mch span:not(:first-child), .v4s .thead.mdir span:not(:first-child), .v4s .thead.mcamp span:not(:first-child), .v4s .thead.msp span:last-child, .v4s .thead.mec span:not(:first-child) {text-align: right}
.v4s .row.mch .num, .v4s .row.mdir .num, .v4s .row.mcamp .num, .v4s .row.mec .num {text-align: right}
.v4s .row.mcamp > span:last-child {text-align: right}
.v4s .dq {display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted)}
.v4s .dq.full {background: var(--lime-weak); color: var(--text)}
.v4s .dq.part {background: var(--surface-2); color: var(--text)}
.v4s .dq.est, .v4s .dq.no {background: var(--peach); color: var(--peach-ink)}
.v4s .btn.sm {padding: 6px 12px; font-size: 12px}
.v4s .funnel {display: flex; align-items: stretch; gap: 8px; margin-top: 12px; flex-wrap: wrap}
.v4s .fstep {flex: 1 1 140px; display: grid; gap: 3px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-solid)}
.v4s .fstep .fn {font-size: 11px; color: var(--muted); font-weight: 700}
.v4s .fstep b {font-size: 22px}
.v4s .fstep span {font-weight: 600; font-size: 13px}
.v4s .fstep small {color: var(--muted); font-size: 11.5px}
.v4s .farr {align-self: center; color: var(--muted); font-style: normal; font-size: 18px}
.v4s .mfrm {margin-top: 12px; grid-template-columns: 1.4fr 1fr 1fr auto}
.v4s .drop {display: grid; gap: 4px; place-items: center; text-align: center; padding: 28px; border: 1.5px dashed var(--btn-line); border-radius: 16px; color: var(--muted); font-size: 13px}
.v4s .drop b {color: var(--text); font-size: 14px}
.v4s .mgrid.mec {grid-template-columns: minmax(0, 1fr) 120px 96px 96px}
.v4s .mgrid.msrc {grid-template-columns: minmax(0, 1fr) 150px 200px}
.v4s .mfrm {grid-template-columns: 1fr 1fr;}
.v4s .mfrm .btn {grid-column: 1 / -1}
.v4s .mfrm select {height: 42px; border: 1px solid var(--btn-line); border-radius: 12px; padding: 0 10px; background: var(--surface-solid); color: var(--text); font: 500 14px var(--font)}
.v4s .hm {display: grid; gap: 28px; max-width: 1180px; margin: 0 auto}
.v4s .hm-top {display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap}
.v4s .brand2 {display: flex; align-items: center; gap: 10px; font-size: 18px}
.v4s .brand2 i {width: 34px; height: 34px; border-radius: 10px; background: var(--dark); color: var(--on-dark); display: grid; place-items: center; font: 700 16px var(--font); font-style: normal}
.v4s .hm-top nav {display: flex; gap: 22px}
.v4s .hm-top nav a {color: var(--muted); text-decoration: none; font-weight: 500; font-size: 13.5px}
.v4s .hm-top nav a:hover {color: var(--text)}
.v4s .hm-act {display: flex; gap: 8px}
.v4s .hm-hero {display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: 18px 0 6px}
.v4s .hm-eye {font-size: 12.5px; font-weight: 600; color: var(--muted)}
.v4s .hm-hero h1 {font-size: 48px; line-height: 1.06; letter-spacing: -.03em; margin: 14px 0 16px; text-wrap: balance}
.v4s .hm-hero > div:first-child > p {font-size: 16.5px; line-height: 1.6; color: var(--muted); max-width: 56ch; margin: 0 0 22px; text-wrap: pretty}
.v4s .hm-cta {display: flex; flex-wrap: wrap; gap: 10px}
.v4s .hm-cta .btn {padding: 12px 20px; font-size: 14px}
.v4s .hm-fine {display: block; margin-top: 12px; color: var(--muted); font-size: 12px}
.v4s .hm-demo .mgrid.hm3 {grid-template-columns: minmax(0, 1fr) 110px 110px}
.v4s .hm-demo .thead.hm3 {padding-top: 6px}
.v4s .hm-demo .row.hm3 {padding: 10px 12px}
.v4s .hm-strip {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line)}
.v4s .hm-strip > div {display: grid; gap: 2px; padding: 18px 20px; border-left: 1px solid var(--line)}
.v4s .hm-strip > div:first-child {border-left: 0; padding-left: 0}
.v4s .hm-strip b {font-size: 28px; letter-spacing: -.02em}
.v4s .hm-strip span {color: var(--muted); font-size: 13px}
.v4s .hm-h {font-size: 26px; letter-spacing: -.02em; margin: 0 0 16px}
.v4s .hm-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px}
.v4s .hm-f {display: grid; gap: 8px; align-content: start}
.v4s .hm-f b {font-size: 16px}
.v4s .hm-f p {margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55}
.v4s .hm-n {font: 700 12px var(--font); color: var(--lime-ink); background: var(--lime-weak); width: max-content; padding: 3px 8px; border-radius: 999px}
.v4s .hm-steps {display: flex; gap: 10px; align-items: stretch}
.v4s .hm-steps > div {flex: 1; display: grid; gap: 6px; align-content: start}
.v4s .hm-steps .fn {width: 28px; height: 28px; border-radius: 50%; background: var(--dark); color: var(--on-dark); display: grid; place-items: center; font-weight: 700; font-size: 13px}
.v4s .hm-steps b {font-size: 15px}
.v4s .hm-steps p {margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55}
.v4s .hm-src {display: flex; flex-wrap: wrap; gap: 8px}
.v4s .hm-src .chip {cursor: default; animation: none}
.v4s .hm-end {display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; background: var(--lime-weak)}
.v4s .hm-end h2 {margin: 0 0 4px; font-size: 22px}
.v4s .hm-end p {margin: 0; color: var(--muted)}
.v4s .hm-foot {display: flex; gap: 22px; flex-wrap: wrap; color: var(--muted); font-size: 12.5px; padding: 6px 0 20px}
.v4app.bare {grid-template-columns: 1fr}
.v4app.bare .side {display: none}
@media (max-width: 1000px) {
.v4s .hm-hero, .v4s .hm-grid {grid-template-columns: 1fr}
.v4s .hm-strip {grid-template-columns: 1fr 1fr}
.v4s .hm-steps {flex-direction: column}
.v4s .hm-steps .farr {display: none}
.v4s .hm-hero h1 {font-size: 36px}
.v4s .hm-top nav {display: none}
}
.v4s .au {display: grid; gap: 28px; max-width: 1080px; margin: 0 auto}
.v4s .au-wrap {display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 40px; align-items: center; padding: 30px 0}
.v4s .au-card {display: grid; gap: 14px; padding: 34px}
.v4s .au-card h1 {margin: 0; font-size: 28px; letter-spacing: -.02em}
.v4s .au-lead {margin: 0 0 6px; color: var(--muted)}
.v4s .au-g {display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 14px; border-radius: 14px; border: 1px solid var(--dark); background: var(--dark); color: var(--on-dark); font: 600 15px var(--font); cursor: pointer}
.v4s .au-g .gl {width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #4285f4; display: grid; place-items: center; font-weight: 800; font-size: 13px}
.v4s .au-or {display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px}
.v4s .au-or::before, .v4s .au-or::after {content: ""; flex: 1; height: 1px; background: var(--line)}
.v4s .au-btn, .v4s .au-btn2 {width: 100%; padding: 12px; font-size: 14px; margin: 0}
.v4s .au-fine {margin: 4px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.5}
.v4s .au-side {display: grid; gap: 18px; align-content: center}
.v4s .au-side > b {font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted)}
.v4s .au-s {display: grid; grid-template-columns: 30px 1fr; gap: 12px}
.v4s .au-s .fn {width: 30px; height: 30px; border-radius: 50%; background: var(--lime-weak); color: var(--lime-ink); display: grid; place-items: center; font-weight: 700}
.v4s .au-s b {font-size: 15px}
.v4s .au-s p {margin: 2px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.5}
.v4s .au-side .btn {width: max-content}
.v4s .au-me {display: flex; align-items: center; gap: 10px}
.v4s .au-me span:nth-child(2) {display: grid; line-height: 1.2}
.v4s .au-me small {color: var(--muted); font-size: 11.5px}
.v4s .cb-head {display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap}
.v4s .cb-head h1 {margin: 0 0 4px; font-size: 30px; letter-spacing: -.02em}
.v4s .cb-head .sub {margin: 0}
.v4s .cb-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px}
.v4s .cb {display: grid; gap: 14px; align-content: start}
.v4s .cb-top {display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center}
.v4s .cb-top .logo, .v4s .cb-top .av {width: 40px; height: 40px; flex-basis: 40px; border-radius: 12px}
.v4s .cb-top b {display: block; font-size: 15px}
.v4s .cb-top small {color: var(--muted); font-size: 12px}
.v4s .cb-kv {display: grid; grid-template-columns: 1fr 1fr 1.6fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line)}
.v4s .cb-kv > div {display: grid; gap: 2px; padding: 10px 0}
.v4s .cb-kv > div + div {padding-left: 12px; border-left: 1px solid var(--line)}
.v4s .cb-kv span {font-size: 11.5px; color: var(--muted)}
.v4s .cb-kv b {font-size: 15px}
.v4s .cb-foot {display: flex; justify-content: space-between; align-items: center; gap: 10px}
.v4s .cb-act {display: flex; align-items: center; gap: 14px}
.v4s .cb-add {place-items: center; place-content: center; min-height: 220px; border: 1.5px dashed var(--btn-line); background: none; box-shadow: none; color: var(--muted); font: inherit; cursor: pointer; text-align: center}
.v4s .cb-add span {font-size: 28px; line-height: 1; color: var(--text)}
.v4s .cb-add b {color: var(--text)}
.v4s .cb-add small {font-size: 12px}
.v4s .cb-new {display: grid; gap: 14px}
.v4s .cb-steps {display: flex; gap: 18px; font-size: 13px; color: var(--muted)}
.v4s .cb-steps i {font-style: normal; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); margin-right: 6px; font-weight: 700; font-size: 11.5px}
.v4s .cb-steps .on {color: var(--text); font-weight: 600}
.v4s .cb-steps .on i {background: var(--dark); color: var(--on-dark)}
.v4s .cb-f {grid-template-columns: 1fr 1fr auto; align-items: end; display: grid; gap: 12px}
.v4s .cb-pg {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 12px}
.v4s .cb-pg input:disabled {color: var(--muted)}
@media (max-width: 900px) {
.v4s .au-wrap, .v4s .cb-pg, .v4s .cb-f {grid-template-columns: 1fr}
}
.v4s .crbar {display: grid; gap: 8px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line)}
.v4s .crrow {display: flex; flex-wrap: wrap; gap: 6px; align-items: center}
.v4s .crsp {flex: 1}
.v4s .crf {display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--btn-line); background: var(--surface-solid); color: var(--text); border-radius: 999px; padding: 5px 11px; font: 600 12.5px/1.2 inherit; cursor: pointer}
.v4s .crf b {font-weight: 600; color: var(--muted); font-size: 11.5px}
.v4s .crf:hover {background: var(--surface-2)}
.v4s .crf.on {background: var(--dark); color: var(--on-dark); border-color: transparent}
.v4s .crf.on b {color: inherit; opacity: .7}
.v4s .crgrid {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px}
.v4s .cr {display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface-solid); min-width: 0}
.v4s .cr.me {border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime) inset}
.v4s .crimg {position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--surface-2)}
.v4s .crno {position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: var(--muted)}
.v4s .crimg img {z-index: 1; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block}
.v4s .crk {position: absolute; left: 10px; top: 10px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(20, 20, 20, .72); color: #fff}
.v4s .crb {display: flex; flex-direction: column; gap: 7px; padding: 12px 14px 14px; flex: 1}
.v4s .crh {display: flex; align-items: center; gap: 7px; font-size: 13px}
.v4s .crh .dq {margin-left: auto}
.v4s .crtag {align-self: flex-start; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text)}
.v4s .crt {margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere}
.v4s .crm {margin-top: auto; display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--muted); padding-top: 8px; border-top: 1px solid var(--line)}
.v4s .crm a {color: var(--text); font-weight: 600; text-decoration: none}
.v4s .crm a:hover {text-decoration: underline}
.v4s .crmore {display: block; margin: 16px auto 0}
@media (max-width: 1100px) {
.v4s .crgrid {grid-template-columns: repeat(3, minmax(0, 1fr))}
}
@media (max-width: 760px) {
.v4s .crgrid {grid-template-columns: repeat(2, minmax(0, 1fr))}
.v4s .crsp {display: none}
}