/* Reuse the approved ink UI: native paper, ink frame, brush dividers and tokens. */
#panel .pbox.listen-box{width:min(710px,90vw)!important;max-height:88vh!important;padding:18px 22px 16px!important;overflow:visible!important;border:16px solid transparent!important;border-image:url(../assets/ui/ink/frame.webp) 30 / 16px / 0 stretch!important;border-radius:0!important;background: url(../assets/ui/ink/oldpaper.jpg) center/cover,var(--paper)!important;box-shadow:none!important;filter:drop-shadow(0 8px 14px rgba(0,0,0,.42));color:var(--ink)}
.listen-box::before,.listen-box::after{content:none!important}.listen-box .pbody{padding:0!important;overflow:visible!important}.listen-box .ink-head{display:flex;align-items:baseline;gap:16px}.listen-box .ink-head h3{font-size:30px;letter-spacing:6px;color:var(--ink)}.listen-box .ink-head>span{font-size:12px;color:var(--ink-3)}
.listen-summary{display:flex;gap:18px;align-items:center;padding:8px 0 10px}.listen-summary img{width:48px;height:58px;object-fit:contain;image-rendering:pixelated}.listen-summary b{color:var(--ink);font-size:17px;letter-spacing:2px}.listen-summary p{font-size:12px;margin:4px 0;color:var(--ink-3)}.listen-summary span{font-size:11px;color:var(--ink-2)}
.listen-tabs{display:flex;gap:7px;margin:2px 0 10px!important}.listen-tabs button{flex:1;background:transparent!important;border:0!important;border-bottom:2px solid var(--paper-edge)!important;border-radius:0!important;box-shadow:none!important;color:var(--ink-2)!important;padding:5px 0!important}.listen-box .listen-tabs button.on{background:url(../assets/ui/ink/stroke.webp) center/100% 100% no-repeat!important;border-bottom-color:transparent!important;color:var(--paper)!important}
.listen-status{display:flex;justify-content:space-between;align-items:center;color:var(--ink-2);font-size:12px;padding:4px 0 8px}.listen-status span{color:var(--ink-3)}
.listen-list{height:250px;max-height:35vh;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:var(--ink-3) transparent;padding:3px 9px 3px 0;display:flex;flex-direction:column;gap:9px;box-shadow:none;background:transparent}
.listen-row{position:relative;flex-shrink:0;display:flex;align-items:center;gap:15px;min-height:74px;padding:7px 12px;border:8px solid transparent;border-image:url(../assets/ui/ink/frame_thin.webp) 16 / 8px / 0 stretch;background:transparent;box-shadow:none;border-radius:0}.listen-row.chosen{background:var(--paper-hi)}
.listen-art{position:relative;flex:0 0 52px;width:52px;height:49px}.listen-art img{width:52px;height:43px;object-fit:contain;mix-blend-mode:multiply;opacity:.8}.listen-art i{position:absolute;left:-3px;bottom:-3px;color:var(--ink-3);font-size:10px;font-style:normal}.listen-row>div:not(.listen-art){flex:1}.listen-row b{font-size:16px;color:var(--ink);letter-spacing:1px}.listen-row small{display:block;margin-top:5px;color:var(--ink-3);font-size:10px}
#panel .listen-box .listen-row button{min-width:70px;min-height:30px;border:0!important;border-radius:0!important;box-shadow:none!important;background:url(../assets/ui/ink/stroke.webp) center/100% 100% no-repeat!important;color:var(--paper)!important;padding:4px 8px!important}
#panel .listen-box .listen-row.chosen button{background:url(../assets/art_v25r1/ui_bk_seal_title.png) center/100% 100% no-repeat!important;color:var(--cinnabar)!important;opacity:1!important;transform:rotate(-3deg)}
.listen-foot{display:flex;align-items:center;justify-content:space-between;position:relative;margin-top:9px;padding-top:10px}.listen-foot::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:url(../assets/ui/ink/ink_line.webp) center/100% 4px no-repeat}.listen-foot span{font-size:11px;color:var(--ink-3)}.listen-foot button{background:transparent!important;border:0!important;color:var(--ink-2)!important;box-shadow:none!important;padding:4px!important}.listen-hint{margin:8px 0 0;font-size:10px;color:var(--ink-3);text-align:center}
@media(max-height:500px){#panel .pbox.listen-box{padding:8px 15px!important}.listen-box .ink-head h3{font-size:24px}.listen-summary{padding:3px 0}.listen-summary img{height:36px}.listen-summary p{display:none}.listen-row{min-height:60px;padding:3px 8px}.listen-list{max-height:32vh}.listen-tabs{margin:2px 0 5px!important}.listen-foot{margin-top:4px}.listen-hint{margin-top:3px}}
.listen-import{display:flex;align-items:center;gap:12px;padding:4px 0 10px}.listen-import button{background:url(../assets/ui/ink/stroke.webp) center/100% 100% no-repeat!important;border:0!important;color:var(--paper)!important;padding:6px 12px!important;min-height:30px}.listen-import span{color:var(--ink-3);font-size:10px}.listen-box .listen-list{max-height:30vh}.listen-box .listen-row b{overflow-wrap:anywhere}#panel .listen-box .listen-row .listen-delete{background:transparent!important;color:var(--ink-3)!important;min-width:38px!important;font-size:11px}@media(max-height:500px){.listen-import{padding:2px 0 5px}.listen-import button{min-height:25px;padding:3px 8px!important}.listen-import span{font-size:9px}.listen-box .listen-list{max-height:27vh}}

.ico.listen-item-icon{background-size:contain!important;background-position:center!important;background-repeat:no-repeat!important;image-rendering:pixelated}
