/* Shorts mode (v46, 1 nov 2026): doar pe telefon, peste pagina normală */
.sh-pill { position: fixed; z-index: 50; right: 16px; bottom: max(16px, env(safe-area-inset-bottom, 0px)); display: none; align-items: center; gap: 7px; font: 700 12px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; padding: 11px 14px; border-radius: 999px; border: 0; background: var(--ink); color: var(--onink); box-shadow: 0 10px 26px -12px rgba(0,0,0,.5); }
.sh-pill svg { width: 12px; height: 12px; fill: currentColor; }
html.sh-mob .sh-pill { display: inline-flex; }
html.sh-on, html.sh-on body { overflow: hidden; }
html.sh-on .sh-pill { display: none; }
.sh { position: fixed; inset: 0; z-index: 55; background: #0b0d11; color: #f4f2ec; font-family: var(--sans); animation: sh-in .35s ease both; }
@keyframes sh-in { from { opacity: 0; transform: scale(.98); } }
.sh-top { position: absolute; z-index: 4; left: 0; right: 0; top: 0; padding: calc(8px + env(safe-area-inset-top, 0px)) 14px 14px; background: linear-gradient(rgba(0,0,0,.6), transparent); }
.sh-prog { display: flex; gap: 2px; margin-bottom: 9px; }
.sh-prog i { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255,255,255,.28); overflow: hidden; }
.sh-prog i::after { content: ""; display: block; height: 100%; width: 100%; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .45s ease; }
.sh-prog i.done::after, .sh-prog i.on::after { transform: none; }
.sh-row { display: flex; align-items: center; gap: 6px; }
.sh-brand { display: flex; align-items: center; gap: 7px; color: #fff; text-decoration: none; font: 800 12px/1 var(--sans); letter-spacing: .08em; margin-right: auto; white-space: nowrap; }
.sh-brand img { width: 22px; height: 22px; border-radius: 50%; background: #fff; }
.sh-row .sh-t { white-space: nowrap; font: 500 10.5px/1 var(--mono); letter-spacing: .05em; color: rgba(255,255,255,.88); text-decoration: none; padding: 7px 9px; border-radius: 999px; background: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 0; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.sh-row .sh-t svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.sh-feed { position: absolute; inset: 0; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.sh-feed::-webkit-scrollbar { display: none; }
.sh-card { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; background: #0b0d11; }
.sh-ph { position: absolute; inset: 0 0 auto; height: 62%; background: #1a1c21 center / cover no-repeat; transform: scale(1.12); transition: transform 7s ease-out, opacity .6s ease; opacity: .55; }
.sh-card.in .sh-ph { transform: scale(1); opacity: 1; }
.sh-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(11,13,17,0) 40%, rgba(11,13,17,.85) 82%, #0b0d11); }
.sh-cr { font: 400 9px/1.25 var(--mono); color: rgba(255,255,255,.45); }
.sh-tx { position: absolute; z-index: 2; left: 0; right: 64px; bottom: 0; padding: 0 0 calc(18px + env(safe-area-inset-bottom, 0px)) 18px; display: flex; flex-direction: column; gap: 9px; }
.sh-tx > * { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.sh-card.in .sh-tx > * { opacity: 1; transform: none; }
.sh-card.in .sh-tx > :nth-child(2) { transition-delay: .07s; } .sh-card.in .sh-tx > :nth-child(3) { transition-delay: .14s; } .sh-card.in .sh-tx > :nth-child(4) { transition-delay: .21s; } .sh-card.in .sh-tx > :nth-child(5) { transition-delay: .28s; }
.sh-tag { display: flex; align-items: center; gap: 9px; font: 500 10.5px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.sh-tag .chtag { font-size: 10.5px; }
.sh-tx h2 { margin: 0; font: 800 clamp(18px, 5.2vw, 23px)/1.18 var(--sans); letter-spacing: -.01em; color: #fff; }
.sh-tx p { margin: 0; font: 400 15px/1.48 var(--serif); color: rgba(255,255,255,.86); }
.sh-go { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; color: #fff; text-decoration: none; font: 600 13px/1 var(--sans); padding: 9px 13px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); }
.sh-go::after { content: "→"; transition: transform .2s ease; }
.sh-go:active::after { transform: translateX(3px); }
.sh-hint { font: 500 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.45); animation: sh-up 1.8s ease-in-out infinite; }
@keyframes sh-up { 50% { transform: translateY(-4px); } }
.sh-rail { position: absolute; z-index: 3; right: 4px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 14px; justify-items: center; }
.sh-rail button { display: grid; justify-items: center; gap: 4px; background: none; border: 0; padding: 0; color: #fff; font: 500 9.5px/1 var(--mono); letter-spacing: .03em; cursor: pointer; width: 60px; opacity: 0; transform: translateX(12px); transition: opacity .45s ease .3s, transform .45s ease .3s; }
.sh-card.in .sh-rail button { opacity: 1; transform: none; }
.sh-rail .ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .15s ease, background .2s ease; }
.sh-rail button:active .ic { transform: scale(.88); }
.sh-rail svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sh-like[aria-pressed="true"] svg { fill: #ff4d6d; stroke: #ff4d6d; }
.sh-like.pop .ic { animation: sh-pop .45s ease; }
@keyframes sh-pop { 40% { transform: scale(1.25); } }
.sh-cm { position: absolute; inset: 0; z-index: 7; }
.sh-cm-bg { position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .25s ease; }
.sh-cm-p { position: absolute; left: 0; right: 0; bottom: 0; height: 74%; display: flex; flex-direction: column; background: #16181d; border-radius: 18px 18px 0 0; transform: translateY(100%); transition: transform .28s cubic-bezier(.2, .8, .2, 1); padding-bottom: env(safe-area-inset-bottom, 0px); }
.sh-cm.on .sh-cm-bg { opacity: 1; } .sh-cm.on .sh-cm-p { transform: none; }
.sh-cm-h { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; border-bottom: 1px solid rgba(255,255,255,.08); font: 700 15px/1 var(--sans); }
.sh-cm-n { font: 500 12px/1 var(--mono); color: rgba(255,255,255,.5); margin-right: auto; }
.sh-cm-x { background: rgba(255,255,255,.1); border: 0; color: #fff; width: 30px; height: 30px; border-radius: 50%; font-size: 17px; cursor: pointer; }
.sh-cm-l { flex: 1; overflow-y: auto; padding: 6px 16px; overscroll-behavior: contain; }
.sh-cm-e { color: rgba(255,255,255,.55); font: 400 14px/1.4 var(--sans); text-align: center; margin: 28px 0; }
.sh-c { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.sh-c-h { display: flex; align-items: center; gap: 8px; font: 400 11px/1 var(--mono); color: rgba(255,255,255,.45); }
.sh-c-h b { font: 700 13px/1 var(--sans); color: #fff; }
.sh-rep { margin-left: auto; background: none; border: 0; color: rgba(255,255,255,.4); font: 400 11px/1 var(--mono); cursor: pointer; padding: 4px 0; }
.sh-c p { margin: 6px 0 0; font: 400 14.5px/1.42 var(--sans); color: rgba(255,255,255,.9); white-space: pre-wrap; overflow-wrap: anywhere; }
.sh-why { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sh-why button { background: rgba(255,255,255,.1); border: 0; color: #fff; font: 500 12px/1 var(--sans); padding: 7px 10px; border-radius: 999px; cursor: pointer; }
.sh-done { color: rgba(255,255,255,.5) !important; font-size: 12px !important; }
.sh-cm-f { padding: 10px 12px 12px; border-top: 1px solid rgba(255,255,255,.08); display: grid; gap: 7px; }
.sh-cm-f input, .sh-cm-f textarea { width: 100%; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: #fff; border-radius: 12px; padding: 9px 12px; font: 400 16px/1.3 var(--sans); }
.sh-cm-f input.sh-cm-name { font-size: 14px; padding: 7px 12px; width: 60%; }
.sh-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sh-cm-row { display: flex; gap: 8px; align-items: flex-end; }
.sh-cm-row textarea { resize: none; flex: 1; }
.sh-cm-row button { flex: none; background: #ffc93c; color: #15171c; border: 0; border-radius: 12px; font: 700 14px/1 var(--sans); padding: 12px 14px; cursor: pointer; }
.sh-cm-row button:disabled { opacity: .5; }
.sh-cm-msg { margin: 0; min-height: 0; font: 600 12.5px/1.3 var(--sans); color: #ff8a8a; }
.sh-cm-msg:empty { display: none; }
.sh-cm-rules { margin: 0; font: 400 10.5px/1.35 var(--sans); color: rgba(255,255,255,.4); }
.tm-vote { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
main.art .tm-vote { margin: 14px 0 22px; }
.tm-poll { display: flex; align-items: center; gap: 6px; }
.tm-poll .q { font: 600 13px/1.2 var(--sans); margin-right: 2px; }
.tm-vote button { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--rule, rgba(255,255,255,.22)); background: var(--panel, transparent); color: inherit; border-radius: 999px; padding: 6px 11px; font: 600 12.5px/1 var(--sans); cursor: pointer; }
.tm-poll button { min-width: 52px; justify-content: center; }
.tm-poll button::before { content: ""; position: absolute; inset: 0; width: var(--p, 0%); background: rgba(255,201,60,.35); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.tm-poll button > * { position: relative; }
.tm-poll button i, .tm-rx button i { font: 500 11px/1 var(--mono); font-style: normal; opacity: .75; }
.tm-poll button i:empty, .tm-rx button i:empty { display: none; }
.tm-vote button.on { border-color: #e0a800; box-shadow: inset 0 0 0 1px #e0a800; }
.tm-vote.voted .tm-poll button { min-width: 74px; }
.tm-rx { display: flex; gap: 5px; }
.tm-rx button { padding: 5px 9px; font-size: 15px; }
.tm-vote button.pop { animation: sh-pop .4s ease; }
.sh .tm-vote { gap: 7px 10px; }
.sh .tm-vote button { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: #fff; padding: 5px 10px; }
.sh .tm-poll .q { color: rgba(255,255,255,.85); font-size: 12.5px; }
.sh .tm-rx button { font-size: 14px; padding: 4px 8px; }
.sh-toast { position: absolute; z-index: 6; left: 50%; bottom: 90px; transform: translateX(-50%); background: rgba(255,255,255,.92); color: #111; font: 600 12px/1 var(--sans); padding: 9px 13px; border-radius: 999px; opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.sh-toast.on { opacity: 1; }
.sh-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sh-tile { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #1a1c21 center / cover no-repeat; color: #fff; text-decoration: none; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 10px; text-align: left; border: 0; font: inherit; cursor: pointer; }
.sh-tile > img:not(.lg) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sh-tile::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(transparent 30%, rgba(0,0,0,.82)); }
.sh-tile > span, .sh-tile > b, .sh-tile > .lg { position: relative; z-index: 2; }
.sh-tile .chtag { align-self: flex-start; font: 600 9px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; padding: 4px 6px; }
.sh-tile b { font: 700 12.5px/1.22 var(--sans); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.sh-tile.web { background: #1b1e24; align-items: center; justify-content: center; text-align: center; border: 1px solid rgba(255,255,255,.18); }
.sh-tile.web::before { display: none; }
.sh-tile.web .lg { width: 44px; height: 44px; border-radius: 50%; background: #fff; }
.sh-tile.web b { font-size: 14px; }
.sh-grid { position: absolute; inset: 0; z-index: 5; background: rgba(11,13,17,.97); overflow-y: auto; padding: calc(16px + env(safe-area-inset-top, 0px)) 14px calc(20px + env(safe-area-inset-bottom, 0px)); }
.sh-grid[hidden] { display: none; }
.sh-gh { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 14px; font: 800 18px/1 var(--sans); }
.sh-gh button { background: rgba(255,255,255,.12); border: 0; color: #fff; width: 34px; height: 34px; border-radius: 50%; font-size: 18px; cursor: pointer; }
.sh-grid .sh-tile, .sh-end .sh-tile { opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .4s ease, transform .4s cubic-bezier(.2, .8, .2, 1); }
.sh-grid.on .sh-tile, .sh-end.in .sh-tile { opacity: 1; transform: none; }
.sh-grid .sh-tile:nth-child(n+9) { transition-delay: .3s !important; }
.sh-tiles .sh-tile:nth-child(2) { transition-delay: .05s; } .sh-tiles .sh-tile:nth-child(3) { transition-delay: .1s; } .sh-tiles .sh-tile:nth-child(4) { transition-delay: .15s; } .sh-tiles .sh-tile:nth-child(5) { transition-delay: .2s; } .sh-tiles .sh-tile:nth-child(6) { transition-delay: .25s; }
.sh-end { display: flex; flex-direction: column; justify-content: center; padding: calc(70px + env(safe-area-inset-top, 0px)) 14px calc(20px + env(safe-area-inset-bottom, 0px)); gap: 6px; }
.sh-end h2 { margin: 0 2px; font: 800 24px/1.15 var(--sans); }
.sh-end p { margin: 0 2px 10px; font: 400 15px/1.45 var(--serif); color: rgba(255,255,255,.75); }
.sh-pick { position: fixed; inset: 0; z-index: 56; background: #0b0d11; color: #fff; display: grid; grid-template-rows: auto 1fr 1fr; gap: 10px; padding: calc(12px + env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px)); font-family: var(--sans); }
.sh-pk-top { display: flex; align-items: center; justify-content: center; gap: 8px; font: 800 13px/1 var(--sans); letter-spacing: .08em; padding: 4px 0 2px; }
.sh-pk-top img { width: 24px; height: 24px; border-radius: 50%; background: #fff; }
.sh-pk { position: relative; overflow: hidden; border: 0; border-radius: 20px; padding: 0; color: #fff; background: #1b1e24; cursor: pointer; display: flex; align-items: flex-end; text-align: left; opacity: 0; transform: translateY(20px) scale(.97); transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1); }
.sh-pick.on .sh-pk { opacity: 1; transform: none; }
.sh-pick.on .sh-pk-b { transition-delay: .1s; }
.sh-pk:active { transform: scale(.98); }
.sh-pk > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: sh-kb 9s ease-out both; }
@keyframes sh-kb { from { transform: scale(1.12); } }
.sh-pk-s::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(transparent 35%, rgba(0,0,0,.8)); }
.sh-pk-b { background: radial-gradient(circle at 70% 20%, #2a2f3a, #15171c 70%); align-items: center; justify-content: center; text-align: center; }
.sh-pk-in { position: relative; z-index: 2; display: grid; gap: 6px; padding: 20px; justify-items: inherit; }
.sh-pk-b .sh-pk-in { justify-items: center; }
.sh-pk-in .lg { width: 84px; height: 84px; margin-bottom: 4px; }
.sh-pk b { font: 900 34px/1 var(--sans); letter-spacing: -.02em; text-transform: uppercase; }
.sh-pk-in span { font: 400 14.5px/1.4 var(--serif); color: rgba(255,255,255,.82); }
@media (max-width: 370px) { .sh-brand span { display: none; } }
@media (max-height: 680px) { .sh-tx p { font-size: 13.5px; line-height: 1.4; } .sh-tx { gap: 7px; } .sh-tx h2 { font-size: 17px; } .sh-rail { gap: 10px; } .sh-end .sh-tile b { -webkit-line-clamp: 3; } }
@media (prefers-reduced-motion: reduce) { .sh, .sh-hint, .sh-pk > img { animation: none; } .sh-pk { transition: none; opacity: 1; transform: none; } .sh-ph, .sh-tx > *, .sh-rail button, .sh-tile { transition: none !important; transform: none !important; opacity: 1 !important; } }

/* v53-extras */
/* Ghicește întâi */
.sh-card.gs-on .sh-tx > p, .sh-card.gs-on .sh-tx > .tm-vote { display: none; }
.sh-gs { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: rgba(255,201,60,.12); border: 1px solid rgba(255,201,60,.45); }
.sh-gs .k { font: 700 10.5px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: #ffc93c; display: flex; align-items: center; }
.sh-gs .k button { margin-left: auto; background: none; border: 0; color: rgba(255,255,255,.55); font: 500 11px/1 var(--mono); padding: 2px 0; cursor: pointer; }
.sh-gs .gq { margin: 0; font: 700 15.5px/1.3 var(--sans); color: #fff; }
.sh-gs .go { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sh-gs .go button { position: relative; overflow: hidden; min-height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.09); color: #fff; font: 700 13px/1.15 var(--sans); padding: 8px 6px; cursor: pointer; }
.sh-gs .go button:disabled { cursor: default; }
.sh-gs.done .go button { opacity: .55; }
.sh-gs.done .go button.ok { opacity: 1; border-color: #4ade80; background: rgba(74,222,128,.22); }
.sh-gs.done .go button.no { opacity: 1; border-color: #f87171; background: rgba(248,113,113,.2); }
.sh-gs .gr { margin: 0; font: 400 14px/1.4 var(--serif); color: rgba(255,255,255,.9); }
.sh-gs .gr b { font-family: var(--sans); }
.sh-gs .gw { font: 500 11px/1.2 var(--mono); color: rgba(255,255,255,.6); }
.sh-gs .gw:empty { display: none; }
.sh-gs .gb { display: flex; gap: 8px; }
.sh-gs .gb button { background: #ffc93c; color: #15171c; border: 0; border-radius: 999px; font: 700 12.5px/1 var(--sans); padding: 9px 14px; cursor: pointer; }
.sh-gs .gb button.ghost { background: rgba(255,255,255,.12); color: #fff; }
.sh-gs .gr, .sh-gs .gw, .sh-gs .gb { display: none; }
.sh-gs.done .gr, .sh-gs.done .gb { display: block; } .sh-gs.done .gb { display: flex; } .sh-gs.done .gw:not(:empty) { display: block; }
.sh-gs.done { animation: sh-pop .4s ease; }
/* Compară cu tine */
.sh-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sh-cmpb { display: inline-flex; align-items: center; gap: 6px; color: #15171c; background: #ffc93c; border: 0; font: 700 13px/1 var(--sans); padding: 10px 13px; border-radius: 999px; cursor: pointer; }
.sh-x { position: absolute; inset: 0; z-index: 7; }
.sh-x-bg { position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .25s ease; }
.sh-x-p { position: absolute; left: 0; right: 0; bottom: 0; max-height: 82%; display: flex; flex-direction: column; background: #16181d; border-radius: 18px 18px 0 0; transform: translateY(100%); transition: transform .28s cubic-bezier(.2, .8, .2, 1); padding-bottom: env(safe-area-inset-bottom, 0px); }
.sh-x.on .sh-x-bg { opacity: 1; } .sh-x.on .sh-x-p { transform: none; }
.sh-x-h { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; font: 700 15px/1.25 var(--sans); border-bottom: 1px solid rgba(255,255,255,.08); }
.sh-x-h b { margin-right: auto; }
.sh-x-x { flex: none; background: rgba(255,255,255,.1); border: 0; color: #fff; width: 30px; height: 30px; border-radius: 50%; font-size: 17px; cursor: pointer; }
.sh-x-b { overflow-y: auto; padding: 12px 16px 16px; overscroll-behavior: contain; display: grid; gap: 12px; }
.sh-x-k { font: 600 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.sh-ctry { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.sh-ctry::-webkit-scrollbar { display: none; }
.sh-ctry button { flex: none; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.07); color: #fff; font: 600 12.5px/1 var(--sans); padding: 8px 11px; cursor: pointer; }
.sh-ctry button.on { background: #ffc93c; border-color: #ffc93c; color: #15171c; }
.sh-x-big { font: 800 22px/1.2 var(--sans); color: #fff; }
.sh-x-big small { display: block; font: 400 14px/1.4 var(--serif); color: rgba(255,255,255,.8); margin-top: 4px; }
.sh-tabs { display: flex; gap: 6px; }
.sh-tabs button { border: 0; border-radius: 10px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.75); font: 600 12px/1 var(--sans); padding: 8px 10px; cursor: pointer; }
.sh-tabs button.on { background: rgba(255,255,255,.2); color: #fff; }
.sh-bars { display: grid; gap: 5px; }
.sh-bar { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 8px; font: 500 12px/1.2 var(--sans); color: rgba(255,255,255,.85); }
.sh-bar i { display: block; height: 10px; border-radius: 5px; background: rgba(255,255,255,.22); width: var(--w); min-width: 3px; transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.sh-bar i.neg { background: rgba(74,222,128,.55); }
.sh-bar.me { color: #fff; font-weight: 800; } .sh-bar.me i { background: #ffc93c; }
.sh-bar.ref i { background: rgba(255,255,255,.5); }
.sh-bar span:last-child { font: 500 11.5px/1 var(--mono); white-space: nowrap; }
.sh-x-n { margin: 0; font: 400 11px/1.4 var(--sans); color: rgba(255,255,255,.45); }
/* Gata, ești la zi */
.sh-card.sh-end { justify-content: flex-start; overflow-y: auto; overscroll-behavior: contain; gap: 10px; }
.sh-end > * { flex: none; }
.sh-done-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #4ade80; color: #0b0d11; font: 800 24px/1 var(--sans); margin: 0 2px; }
.sh-day { display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.sh-day b { font: 800 16px/1.2 var(--sans); }
.sh-day > span { font: 400 13px/1.35 var(--sans); color: rgba(255,255,255,.65); }
.sh-dl { display: grid; grid-auto-rows: min-content; gap: 5px; max-height: 36vh; overflow-y: auto; overscroll-behavior: contain; }
.sh-dr { position: relative; overflow: hidden; display: grid; grid-template-columns: 40px 1fr auto; gap: 9px; align-items: center; text-align: left; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #fff; border-radius: 11px; min-height: 52px; padding: 5px 9px 5px 5px; font: 600 12.5px/1.25 var(--sans); cursor: pointer; }
.sh-dr img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: #1a1c21; position: relative; }
.sh-dr span { position: relative; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sh-dr i { position: relative; font: 500 11px/1 var(--mono); font-style: normal; color: rgba(255,255,255,.7); }
.sh-dr::before { content: ""; position: absolute; inset: 0; width: var(--p, 0%); background: rgba(255,201,60,.22); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.sh-dr.on { border-color: #ffc93c; }
.sh-day .dn { font: 500 11px/1 var(--mono); color: rgba(255,255,255,.5); }
.sh-day .dn:empty { display: none; }
.sh-nl { display: grid; gap: 6px; padding: 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.18); }
.sh-nl b { font: 800 15px/1.2 var(--sans); } .sh-nl span { font: 400 13px/1.4 var(--sans); color: rgba(255,255,255,.7); }
.sh-nl a { justify-self: start; color: #15171c; background: #ffc93c; text-decoration: none; font: 700 13px/1 var(--sans); padding: 10px 14px; border-radius: 999px; }
.sh-endb { display: flex; gap: 8px; flex-wrap: wrap; }
.sh-endb > * { color: #fff; text-decoration: none; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; font: 600 13px/1 var(--sans); padding: 10px 14px; cursor: pointer; }