/* CONJUNTO — AS COLUNAS SE AJUSTAM AO ESPAÇO */
.cards                      {display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:20px}

/* 1. CARD — MODELO BÁSICO E ESTRUTURA COMUM */
.card                      {min-width:0; overflow:hidden; border:1px solid var(--card-linha); border-radius:12px; color:var(--card-texto); background:var(--card-fundo)}
.card > a                  {display:flex; flex-direction:column; height:100%; color:inherit; text-decoration:none}
.card > a:hover            {background:var(--fundo-suave)}
.card > a:focus-visible    {outline:2px solid var(--link); outline-offset:-3px}
.card .text                {display:flex; flex-direction:column; flex:1; gap:5px; min-width:0; padding:20px; overflow-wrap:anywhere}
.card h3                   {margin:0; color:var(--titulo); font:700 clamp(18px,2vw,22px)/1.3 Roboto,sans-serif}
.card p                    {margin:0; color:var(--texto-suave); font:400 14px/1.2 Roboto,sans-serif}
.card small                {color:var(--link); font:700 12px/1.4 Roboto,sans-serif}
.card strong               {margin-top:auto; color:var(--link); font:700 22px/1.3 Roboto,sans-serif}
.card img                  {display:block; max-width:100%; object-fit:cover}

/* 2. CARD-IMG — IMAGEM ACIMA */
.card-img > a > img        {width:100%; aspect-ratio:4/3}

/* 3. CARD-HORIZONTAL — IMAGEM AO LADO, EMPILHA QUANDO FALTA ESPAÇO */
.card-horizontal > a       {display:grid; grid-template-columns:35% minmax(0,1fr)}
.card-horizontal > a > img {width:100%; height:100%; min-height:180px}
.card-horizontal .text     {padding:15px}

/* 4. CARD-ICON — ÍCONE E CONTEÚDO */
.card-icon .text > i       {display:flex; align-items:center; justify-content:center; width:52px; height:52px; margin-bottom:5px; border-radius:10px; color:var(--botao-texto); background:var(--botao-fundo); font-size:26px}

/* 5. CARD-OVERLAY — TEXTO SOBRE A IMAGEM */
.card-overlay              {background:var(--base5)}
.card-overlay > a        {position:relative; isolation:isolate; min-height:380px}
.card-overlay > a:hover    {background:transparent}
.card-overlay > a > img    {position:absolute; inset:0; width:100%; height:100%}
.card-overlay > a::after {content:""; position:absolute; inset:0; background:linear-gradient(to bottom,transparent 20%,rgba(0,0,0,.5) 60%,#000 100%); pointer-events:none}
.card-overlay strong {margin-top:0}
.card-overlay .text      {position:relative; z-index:1; flex:1; justify-content:flex-end}
.card-overlay h3,.card-overlay p,.card-overlay small,.card-overlay strong {color:var(--base-texto)}


/* TITULOS (.tta/.ttb/.ttrotulo/.ttmax) agora na comum.css (global) */

/* PAGINAÇÃO */
.paginacao                          {display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:20px 0; font:400 13px/1 Roboto,sans-serif}
.paginacao a,.paginacao span,.paginacao strong {display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 10px; border:1px solid var(--linha); border-radius:6px; color:var(--link); background:var(--card-fundo); text-decoration:none}
.paginacao a:hover,.paginacao .current,.paginacao .active,.paginacao [aria-current="page"],.paginacao strong {color:var(--botao-texto); background:var(--botao-fundo); border-color:var(--botao-fundo); font-weight:700}
.paginacao a:focus-visible           {outline:2px solid var(--link); outline-offset:2px}

/* NAVEGAÇÃO */
.navigation                         {display:flex; align-items:center; gap:7px; min-height:36px; padding:5px 9px; border-radius:6px; color:var(--link); background:transparent; text-decoration:none; font:400 13px/1.4 Roboto,sans-serif}
.navigation.fleft                   {float:left}
.navigation.fright                  {float:right; margin-left:0}
a.navigation:hover                  {color:var(--link-hover); background:var(--fundo-suave)}
span.navigation                     {padding-left:0; color:var(--texto-suave)}
span.navigation::before             {content:"/"; margin-right:5px}
.navigation i                       {margin:0; padding:0; border:0; color:inherit; background:transparent; font-size:14px}
.hrnav                              {clear:both; height:1px; margin:12px 0 25px; border:0; background:var(--linha)}

/* ACORDEÃO */
.acordion                           {display:grid; gap:10px}
.acordion_item                      {interpolate-size:allow-keywords; overflow:hidden; border:1px solid var(--card-linha); border-radius:10px; color:var(--card-texto); background:var(--card-fundo)}
.acordion_item::details-content     {height:0; opacity:0; overflow:hidden; transition:height .4s ease,opacity .3s ease,content-visibility .4s allow-discrete}
.acordion_item[open]::details-content {height:auto; opacity:1}
.acordion_botao                     {display:flex; align-items:center; gap:12px; padding:15px; font:700 15px/1.45 Roboto,sans-serif; cursor:pointer; list-style:none}
.acordion_botao::-webkit-details-marker {display:none}
.acordion_botao:hover               {background:var(--fundo-suave)}
.acordion .acordion_icone {display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:8px; color:var(--botao-texto); background:var(--botao-fundo); font-size:16px}
.acordion_titulo                    {flex:1; min-width:0; overflow-wrap:anywhere}
.acordion_seta                      {flex:none; color:var(--texto-suave); font-size:12px; transition:transform .2s}
.acordion_item[open] .acordion_seta {transform:rotate(180deg)}
.acordion_botao:focus-visible,.navigation:focus-visible,.acordion_arquivos a:focus-visible {outline:2px solid var(--link); outline-offset:-2px}
.acordion_texto                     {padding:0 15px 18px 63px; overflow-wrap:anywhere}
.acordion_texto p                   {margin:0 0 14px; color:inherit}
.acordion_texto p:last-child        {margin-bottom:0}
.acordion_texto img                 {max-width:100%; height:auto}
.acordion_arquivos                  {display:grid; gap:7px}
.acordion_arquivos a                {display:flex; align-items:center; gap:9px; padding:10px 12px; border:1px solid var(--linha); border-radius:6px; color:var(--link); background:var(--fundo-suave); text-decoration:none; font:400 13px/1.5 Roboto,sans-serif}
.acordion_arquivos a:hover          {color:var(--link-hover); background:var(--card-fundo)}
.acordion_arquivos i                {flex:none}
.acordion_vazio                     {margin:0; padding:25px; border:1px dashed var(--linha); border-radius:10px; color:var(--texto-suave); background:var(--fundo-suave)}
@media(max-width:600px) {.acordion_botao {padding:12px; gap:10px; font-size:14px}.acordion_texto {padding:0 12px 15px}.navigation {padding:5px; font-size:12px}}
@media(prefers-reduced-motion:reduce) {.acordion_item::details-content,.acordion_seta {transition:none}}

.lista                      {display:grid; gap:10px}
.lista > a,.lista > div     {display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:12px; padding:15px; border:1px solid var(--card-linha); border-radius:8px; color:var(--card-texto); background:var(--card-fundo); text-decoration:none}
.lista > a:hover            {background:var(--fundo-suave)}
.lista > a:focus-visible    {outline:2px solid var(--link); outline-offset:2px}
.lista > a > i,.lista > div > i {color:var(--link); text-align:center; font-size:22px}
.lista h3                   {margin:4px 0 0; color:var(--titulo); overflow-wrap:anywhere; font:700 15px/1.4 Roboto,sans-serif}
.lista small                {color:var(--texto-suave); font:400 12px/1.4 Roboto,sans-serif}
.lista p                    {margin:6px 0; color:var(--texto-suave); font:400 14px/1.4 Roboto,sans-serif}
.lista audio                {display:block; width:100%; max-width:450px; height:40px; margin-top:10px}
.lista .lista-btn           {padding:4px 14px; border-radius:6px; color:var(--botao-texto); background:var(--botao-fundo); font:700 12px/1.4 Roboto,sans-serif; display:flex; align-items:center; justify-content:center}
@media(max-width:600px) {.lista > a,.lista > div {grid-template-columns:25px minmax(0,1fr); gap:10px; padding:12px}.lista > a > small {grid-column:2}}

.barra       {position:relative; overflow:hidden; height:26px; margin-top:8px; border-radius:5px; background:var(--fundo-suave)}
.barra > div {position:absolute; inset:0 auto 0 0; background:var(--base3)}
.barra > span {position:relative; display:block; padding:0 8px; color:var(--base-texto); font:700 12px/26px Roboto,sans-serif}
.lista [votarEnquete] {cursor:pointer}

.hero-section               {min-height:100vh; scroll-margin-top:400px; display:flex; flex-direction:column; justify-content:center;}
.hero-section > *           {width:100%;}
@media (max-width: 768px)   {.hero-section {padding: 60px 15px; min-height: 80vh;}}

/* PUBLICAÇÃO */
.view                       {padding:0; color:var(--texto)}
.view figure                {margin:0 0 20px}
.view figure img            {display:block; width:100%; height:auto; border-radius:12px}
.view figcaption            {margin-top:8px; color:var(--texto-suave); text-align:center; font:400 12px/1.5 Arial,sans-serif}
.view .data                 {margin-bottom:15px; color:var(--texto-suave); font:400 12px/1.5 Arial,sans-serif}
.view .subtitulo            {margin:0 0 20px; color:var(--texto-suave); font:500 18px/1.5 Arial,sans-serif}
.view .texto                {margin-bottom:25px; overflow-wrap:anywhere; font:400 16px/1.7 Arial,sans-serif}
.view .texto img            {max-width:100%; height:auto}
.view .compartilhar         {display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:25px 0}
.view .copyLinkButton       {display:flex; align-items:center; gap:8px; padding:10px 14px; border:0; border-radius:6px; color:var(--botao-texto); background:var(--botao-fundo); font:700 12px/1.4 Arial,sans-serif; cursor:pointer}
.view .copyLinkButton:hover {background:var(--botao-hover)}
.view .copyMessage          {display:none; color:var(--link); font:400 12px/1.4 Arial,sans-serif}
.view-ranking > a               {display:grid; grid-template-columns:80px minmax(0,1fr); align-items:center; gap:12px; margin-bottom:12px; color:var(--texto); text-decoration:none}
.view-ranking > a:hover         {color:var(--link)}
.view-ranking > a:focus-visible {outline:2px solid var(--link); outline-offset:3px}
.view-ranking img               {display:block; width:80px; height:65px; border-radius:6px; object-fit:cover}
.view-ranking h3                {margin:0 0 5px; color:inherit; overflow-wrap:anywhere; font:700 13px/1.4 Arial,sans-serif}
.view-ranking small             {color:var(--texto-suave); font:400 11px/1.4 Arial,sans-serif}

.footer a           	    {color: var(--footfont); text-decoration:none; font-size:13px; line-height:25px}
.footer a:hover     	    {color: var(--foothover); text-decoration:none; /*opacity: 0.8*/}
.footer h3          	    {color: var(--foottitle); font-size:20px; line-height:40px; font-weight:400;}
.footer h6          	    {color: var(--footfont); font-size: 13px; line-height:21px; font-weight:400;}
.footer li          	    {color:  var(--footfont); font-size: 13px; line-height:25px; font-weight:400;}
.footer li a          	    {color: var(--footfont); font-size: 13px; line-height:25px; font-weight:400;}

.nav-links                  {display: flex; gap: 2px}
.nav-links a                {background: var(--navlinks); color: var(--navlinfont); font: 400 13px/15px 'Roboto'; min-width: 40px; height: 40px; padding: 0 15px; border-radius: 3px; display: flex; align-items: center; text-transform: uppercase; letter-spacing: 1px; transition: 0.3s;}
.nav-links a:hover          {background: var(--navlinhov); cursor: pointer;}
.nav-links a.active         {background: var(--navlinhov); color: var(--navlinfont);}
.nav-hr             	    {margin: 2px 0 10px 0; border: 1px dotted var(--hrdefault)}
@media screen and (max-width:1024px){.nav-links {display:none}}

.portais-pag .full  	    {background: var(--portaispag); color:var(--porfont); border: solid 1px var(--navbor); font: bold 13px 'Lato'; letter-spacing: 0.3px;  min-width: 30px; height:30px; margin-right:2px; margin-bottom:3px; padding:0 15px; border-radius: 3px; display: flex; align-items: center}
.portais-pag .active  	    {background: var(--poractive); color:var(--porfont); border: solid 1px var(--navbor); font: bold 13px 'Lato'; letter-spacing: 0.3px;  min-width: 30px; height:30px; margin-right:2px; margin-bottom:3px; padding:0 15px; border-radius: 3px; display: flex; align-items: center}
.portais-pag .full:hover    {background: var(--porhover)}
.portais-pag a      	    {font: 700 13px/15px 'Roboto'; color:var(--porfont)}

/* ----- Sistema News (carossel/scroll) ----- */
.flexcroll          	   {width:100%; height:350px; overflow-y:scroll}
.flexcroll::-webkit-scrollbar {width: 6px}
.flexcroll::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px}
.flexcroll::-webkit-scrollbar-thumb {-webkit-border-radius: 10px; border-radius: 10px; background:var(--ttabkg); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5)}

/* ----- Scroll do navegador) ----- */
::-webkit-scrollbar-track   {background-color:var(--scrollbkg)}
::-webkit-scrollbar         {width: 6px; background:var(--scroll)}
::-webkit-scrollbar-thumb   {background:var(--scrollmov)}
::-webkit-scrollbar-thumb:hover {background:var(--scrollhover)}

::-webkit-input-placeholder {color:var(--inputwebkit) /* Chrome/Opera/Safari */}
::-moz-placeholder          {color:var(--inputwebkit) /* Firefox 19+ */}
:-ms-input-placeholder      {color:var(--inputwebkit) /* IE 10+ */}
:-moz-placeholder           {color:var(--inputwebkit) /* Firefox 18- */}

/* MENU PORTAIS */
.menu-portais .bg           {width:100%; position:relative}
.menu-portais .bg:after     {content: ''; display: table; clear: left}
.menu-portais .zindex       {z-index:9; position:absolute; width:100%; min-height:0; margin-top:0px; }
.menu-portais .align        {display:flex; flex-direction: row; align-items: center; height:60px}
.menu-portais h3            {color:var(--mpfont); font: 700 15px/20px "Roboto", sans-serif}
.menu-portais h5            {color:var(--mpfont); font: 700 10px/12px "Roboto", sans-serif}
.menu-portais span i        {color:var(--mpfont); font-size:150%;}
.col-5-portais-menu         {background:var(--menuportais); width:19.8%; float:left; margin:0.1%; margin-bottom:0px; margin-top:0px}
.col-5-portais-menu:hover   {background:var(--mphover)}
.col-6-portais-menu         {background:var(--menuportais); width:16.46%; float:left; margin:0.1%; margin-bottom:0px; margin-top:0px}
.col-6-portais-menu:hover   {background:var(--mphover)}

.aside-portais 			    {background: var(--menuportaissub); padding:8px 0px}
.aside-portais li a         {color: var(--mpsubfont); font: 700 13px/13px 'Tahoma'; display: block; width: 100%; padding: 7px 10px; border-top: 1px solid var(--pmbortop); margin: 0; overflow: hidden;}
.aside-portais li a:hover   {background: var(--mpsubhover); cursor: pointer; overflow: hidden; outline: none;}
.aside-portais li a:before  {content: "\f0da"; font-family: FontAwesome; color: var(--mpsubfont); margin-right: 7px;}
.aside-portais:focus 	    {outline: 0}
.aside-portais img 		    {float:left; margin:0 10px 0 0; width:80px; height:auto;}
.aside-portais i 		    {margin-right:7px;}

.aside-portais li.has-sub   {position: relative; }
.aside-portais li.has-sub a {padding-right:30px;}
.aside-portais li.has-sub > a:after {top: 6px; right:11px; position:absolute; display:block; content:'+'}
.aside-portais li.has-sub:hover > a:after {content:'-'}
.aside-portais li.has-sub:hover ul li a:after {content:''}

/* submenu bg, height e linha horizontal */
.aside-portais li.has-sub ul{position:absolute; left: 100%; top: -8px; width: 90%; overflow: hidden;}
.aside-portais li.has-sub ul li { height:0px; overflow:hidden}
.aside-portais li.has-sub:hover ul {padding:8px; padding-left: 0px; background:var(--pmsub)}/* var(--pmhas);*/
.aside-portais li.has-sub:hover ul li { height:auto; }
.aside-portais li.has-sub ul li {height:0; overflow: none; }
.aside-portais li.has-sub ul li:hover {background:var(--pmsubhover)}
.aside-portais li.has-sub ul li a {font: 700 13px/13px 'Tahoma'; color:var(--pmsubfont); width: 260px; }
.aside-portais li.has-sub ul li:hover > a,nav ul ul li a:hover {}
.aside-portais li.has-sub ul li:last-child > a,nav ul ul li.last-item > a {border-bottom:0}
/* FIM MENU PORTAIS */

/* FORMS */
/*input[type="text"]      {background-color:var(--typetexbkg); color:var(--typetexfont); border: 1px solid var(--typetexbor); font: 400 16px/18px "Lato"; padding: 7px; border-radius: 5px; outline: none;}*/

.form-search                {background: var(--searchbkg); padding: 15px; border-radius: 5px; overflow: hidden}
.form-search h4             {font: 700 14px/16px "Roboto"; color: var(--searchfont); text-align:left}
.form-search-field          {position: relative; width:100%; border: var(--searchbor) 1px solid; line-height:35px; border-radius:10px}
.form-search-btn            {background: var(--searchbtn); position:absolute; top:0; right:0; border:none; outline:none; padding:6px 10px; line-height:20px; border-top-right-radius:10px; border-bottom-right-radius:10px}
.form-search-btn:hover      {background: var(--searchbtnhov); color:#fff; cursor: pointer}
.form-search-btn .fa        {font-size:20px; color:#fff}
.form-search input          {background: transparent; border: 0; color: var(--searchfont); width: 100%; padding: 0 10px}
.form-search ::placeholder  {color: var(--searchwebkit); font-size: 14px}

.form-search-box            {background: var(--searchboxbkg); padding: 15px; border-radius: 5px; overflow: hidden}
.form-search-box h4         {font: 700 14px/16px "Roboto"; color: var(--searchbfont); text-align:left}
.form-search-box-field      {position: relative; width:100%; border: var(--searchbbor) 1px solid; line-height:35px; border-radius:10px}
.form-search-box-btn        {background: var(--searchbbtn); position:absolute; top:0; right:0; border:none; outline:none; padding:6px 10px; line-height:20px; border-top-right-radius:10px; border-bottom-right-radius:10px}
.form-search-box-btn:hover  {background: var(--searchbbtnhov); color:#fff; cursor: pointer}
.form-search-box-btn .fa    {font-size:20px; color:#fff}
.form-search-box input      {background: transparent; border: 0; color: var(--searchbfont); width: 100%; padding: 0 10px}
.form-search-box ::placeholder {color: var(--searchbwebkit); font-size: 14px}

.form-search-sidebar        {padding:5px; border-radius: 5px; overflow: hidden}
.form-search-sidebar h4     {font: 700 14px/16px "Roboto"; color: var(--searchsidfont); text-align:left}
.form-search-sidebar-field  {position: relative; width:100%; border: var(--searchsidbor) 1px solid; line-height:35px; border-radius:10px}
.form-search-sidebar-btn    {background: var(--searchsidbtn); position:absolute; top:0; right:0; border:none; outline:none; padding:6px 10px; line-height:20px; border-top-right-radius:10px; border-bottom-right-radius:10px}
.form-search-sidebar-btn:hover {background: var(--searchsidbtnhov); color:#fff; cursor: pointer}
.form-search-sidebar-btn .fa{font-size:20px; color:#fff}
.form-search-sidebar input  {background: transparent; border: 0; color: var(--searchsidfont); width: 100%; padding: 0 10px}
.form-search-sidebar ::placeholder  {color: var(--searchsidwebkit); font-size: 14px}

/* CAROUSEL ROETATIVO */
.carousel-jp                {position:relative;max-width:100%;margin:0 auto;overflow:hidden;}
.carousel-jp>.item          {position:relative;display:none;transition:transform 0.6s ease-in-out;backface-visibility:hidden;perspective:1000;}
.carousel-jp>.item>a>img,.carousel-jp>.item>img {line-height:1;}
.carousel-jp>.item.active,.carousel-jp>.item.next,.carousel-jp>.item.prev {display:block;}
.carousel-jp>.next,.carousel-jp>.prev {position:absolute;top:0;}
.carousel-jp .block-text    {height:140px}
.carousel-col               {position:relative;padding:5px;float:left;}
.carousel-jp .active>div    {display:none;}
.carousel-jp .active>div:first-child {display:block;}
.carousel-jp>.item.active.right,.carousel-jp>.item.next {transform:translate3d(100%,0,0);}
.carousel-jp>.item.active.left,.carousel-jp>.item.prev {transform:translate3d(-100%,0,0);}
.carousel-jp>.item.active,.carousel-jp>.item.next.left,.carousel-jp>.item.prev.right {transform:translate3d(0,0,0);}
@media (max-width:768px)                        {.carousel-col {width:  100%;}.carousel-jp .block-text {height: 80px} .carousel-jp .active>div:first-child+div {display:none;}}
@media (min-width:769px) and (max-width:991px)  {.carousel-col {width:   50%;}.carousel-jp .block-text {height:100px} .carousel-jp .active>div:first-child+div {display:block;}}
@media (min-width:992px) and (max-width:1199px) {.carousel-col {width:33.33%;}.carousel-jp .block-text {height:120px} .carousel-jp .active>div:first-child+div {display:block;} .active>div:first-child+div+div {display:block;}}
@media (min-width:1200px)                       {.carousel-col {width:   25%;}.carousel-jp .block-text {height:140px} .carousel-jp .active>div:first-child+div {display:block;} .active>div:first-child+div+div {display:block;} .active>div:first-child+div+div+div {display:block;}}


/* JP-CAROUSEL NEWS */
.jp-wrap        { --jp-accent: #1d4ed8; --jp-ink: #0f172a; --jp-muted: #64748b; --jp-border: #e2e8f0; --jp-bg: #f8fafc; --jp-radius: 14px; --jp-shadow: 0 4px 20px rgba(15,23,42,.08); --jp-shadow-hover: 0 10px 30px rgba(15,23,42,.14); display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 32px; max-width: 1400px; margin: 0 auto; padding: 24px 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Roboto, sans-serif; color: var(--jp-ink); box-sizing: border-box; }
.jp-wrap *, .jp-wrap *::before, .jp-wrap *::after { box-sizing: border-box; }
.jp-carousel    { position: relative; border-radius: var(--jp-radius); overflow: hidden; box-shadow: var(--jp-shadow); background: #000; }
.jp-track       { display: flex; transition: transform .55s cubic-bezier(.4,0,.2,1); will-change: transform; }
.jp-slide       { flex: 0 0 100%; min-width: 0; }
.jp-slide-link  { display: block; text-decoration: none; color: inherit; }
.jp-image       { position: relative; width: 100%; aspect-ratio: 800 / 600; background-color: #1e293b; background-size: cover; background-position: center;}
.jp-overlay     { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 24px 22px; background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,0) 100%); }
.jp-title       { margin: 0; font-size: 34px; line-height: 1.3; font-weight: 500; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.3); }
.jp-arrow       { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border: none; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--jp-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.18); transition: background .2s ease, transform .2s ease; z-index: 2; }
.jp-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.jp-arrow svg   { width: 20px; height: 20px; }
.jp-arrow-prev  { left: 16px; }
.jp-arrow-next  { right: 16px; }
.jp-carousel .jp-dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; gap: 8px; justify-content: center; z-index: 2; }
.jp-dot         { width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(255,255,255,.5); cursor: pointer; padding: 0; transition: background .2s ease, transform .2s ease; }
.jp-dot.is-active { background: #fff; transform: scale(1.25); }
.jp-list-wrap   { min-height: 0; max-height: 640px; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: var(--jp-border) transparent; }
.jp-list-wrap::-webkit-scrollbar { width: 6px; }
.jp-list-wrap::-webkit-scrollbar-track { background: transparent; }
.jp-list-wrap::-webkit-scrollbar-thumb { background: var(--jp-border); border-radius: 10px; }
.jp-list-wrap::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }
.jp-list        { display: flex; flex-direction: column; }
.jp-row         { display: flex; align-items: center; gap: 14px; padding: 5px 4px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--jp-border); transition: background .15s ease, padding-left .15s ease; }
.jp-row:hover   { background: var(--jp-bg); padding-left: 10px; }
.jp-row:first-child { padding-top: 0; }
.jp-row-image   { flex: 0 0 100px; width: 100px; aspect-ratio: 4 / 3; border-radius: 10px; background-color: var(--jp-bg); background-size: cover; background-position: center; }
.jp-row-body    { flex: 1 1 auto; min-width: 0; }
.jp-row-meta    { font-size: 12px; font-weight: 700; color: var(--jp-accent); margin-bottom: 3px; }
.jp-row-title   { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--jp-ink); }
.jp-empty       { color: var(--jp-muted); font-size: 14px; }
@media (max-width: 1024px) { .jp-wrap { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .jp-title { font-size: 19px; } .jp-row-image { flex-basis: 80px; width: 80px; } .jp-row-title { font-size: 13px; } }