/* 자동 생성 — .tools/landing/src/kplayer/appcss.php (앱 1.3.0 css 그대로, 범위만 좁힘). 직접 고치지 말 것 */
/* player.css */
.kp-ui {position: absolute; left: 0; top: 0; right: 0; bottom: 0; font-size: 12px; color: #fff; user-select: none;}
.kp-ui.nocursor {cursor: none;}
.kp-ui .p-top, .kp-ui .p-bottom {transition: opacity .2s;}
.kp-ui.hidden .p-top, .kp-ui.hidden .p-bottom {opacity: 0; pointer-events: none;}
.kp-ui .ico {width: 24px; height: 24px; color: #fff; background-repeat: no-repeat; background-size: 100% 100%;}
.kp-ui .i-play {-webkit-mask-image: url(icons/play.svg); mask-image: url(icons/play.svg);}
.kp-ui .i-prev {-webkit-mask-image: url(icons/prev.svg); mask-image: url(icons/prev.svg);}
.kp-ui .i-next {-webkit-mask-image: url(icons/next.svg); mask-image: url(icons/next.svg);}
.kp-ui .i-vol {-webkit-mask-image: url(icons/vol-on.svg); mask-image: url(icons/vol-on.svg);}
.kp-ui .i-sub {-webkit-mask-image: url(icons/sub.svg); mask-image: url(icons/sub.svg);}
.kp-ui .i-set {-webkit-mask-image: url(icons/set.svg); mask-image: url(icons/set.svg);}
.kp-ui .i-list {-webkit-mask-image: url(icons/list.svg); mask-image: url(icons/list.svg);}
.kp-ui .i-pause {-webkit-mask-image: url(icons/pause.svg); mask-image: url(icons/pause.svg);}
.kp-ui .i-mute {-webkit-mask-image: url(icons/vol-off.svg); mask-image: url(icons/vol-off.svg);}
.kp-ui.playing .p-btn-play .ico {-webkit-mask-image: url(icons/pause.svg); mask-image: url(icons/pause.svg);}
.kp-ui.muted .p-btn-mute .ico {-webkit-mask-image: url(icons/vol-off.svg); mask-image: url(icons/vol-off.svg);}
.kp-ui .p-logo {display: none; position: absolute; left: 0; top: 0; right: 0; bottom: 0;}
.kp-ui.idle .p-logo {display: block;}
.kp-ui.audio {background-color: #1c1c1c;}
.kp-ui .p-lp {display: none; position: absolute; left: 50%; top: 50%; font-size: min(5.067cqw, 5.067cqh); width: 15em; height: 15em; transform: translate(-50%, -50%); pointer-events: none;}
.kp-ui.audio .p-lp {display: block;}
.kp-ui .p-lp-disc {position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 50%; background-color: #111; box-shadow: 0 0.0625em 0.1875em #00000080, 0 0.25em 1em 0.5em #00000026;}
.kp-ui .p-lp .g {position: absolute; border-radius: 50%;}
.kp-ui .p-lp .g0 {left: 0em; top: 0em; right: 0em; bottom: 0em; background: radial-gradient(circle, transparent 64.818%, #080808 64.818% 65.407%, #585858 65.407% 65.997%, #080808 65.997% 66.586%, #414141 66.586% 67.175%, #080808 67.175% 68.943%, #ffffff 68.943% 70.121%, #080808 70.121% 70.711%, transparent 70.711%);}
.kp-ui .p-lp .g1 {left: 0.625em; top: 0.625em; right: 0.625em; bottom: 0.625em; background: radial-gradient(circle, transparent 66.211%, #414141 66.211% 66.854%, #080808 66.854% 67.497%, #585858 67.497% 68.139%, #080808 68.139% 68.782%, #585858 68.782% 69.425%, #080808 69.425% 70.068%, #414141 70.068% 70.711%, transparent 70.711%);}
.kp-ui .p-lp .g2 {left: 1.0625em; top: 1.0625em; right: 1.0625em; bottom: 1.0625em; background: radial-gradient(circle, transparent 65.905%, #585858 65.905% 66.592%, #080808 66.592% 67.278%, #414141 67.278% 67.965%, #414141 67.965% 68.651%, #080808 68.651% 69.338%, #585858 69.338% 70.024%, #080808 70.024% 70.711%, transparent 70.711%);}
.kp-ui .p-lp .g3 {left: 1.5em; top: 1.5em; right: 1.5em; bottom: 1.5em; background: radial-gradient(circle, transparent 65.555%, #080808 65.555% 66.291%, #414141 66.291% 67.028%, #080808 67.028% 67.764%, #414141 67.764% 68.501%, #080808 68.501% 69.238%, #585858 69.238% 69.974%, #080808 69.974% 70.711%, transparent 70.711%);}
.kp-ui .p-lp .g4 {left: 1.9375em; top: 1.9375em; right: 1.9375em; bottom: 1.9375em; background: radial-gradient(circle, transparent 65.149%, #292929 65.149% 65.944%, #414141 65.944% 66.738%, #080808 66.738% 67.533%, #292929 67.533% 68.327%, #080808 68.327% 69.122%, #080808 69.122% 69.916%, #585858 69.916% 70.711%, transparent 70.711%);}
.kp-ui .p-lp .g5 {left: 2.375em; top: 2.375em; right: 2.375em; bottom: 2.375em; background: radial-gradient(circle, transparent 64.674%, #080808 64.674% 65.537%, #414141 65.537% 66.399%, #080808 66.399% 67.261%, #414141 67.261% 68.124%, #080808 68.124% 68.986%, #585858 68.986% 69.848%, #080808 69.848% 70.711%, transparent 70.711%);}
.kp-ui .p-lp .g6 {left: 2.8125em; top: 2.8125em; right: 2.8125em; bottom: 2.8125em; background: radial-gradient(circle, transparent 64.111%, #080808 64.111% 65.054%, #414141 65.054% 65.997%, #080808 65.997% 66.939%, #080808 66.939% 67.882%, #585858 67.882% 68.825%, #080808 68.825% 69.768%, #414141 69.768% 70.711%, transparent 70.711%);}
.kp-ui .p-lp .g7 {left: 3.25em; top: 3.25em; right: 3.25em; bottom: 3.25em; background: radial-gradient(circle, transparent 66.551%, #585858 66.551% 67.591%, #080808 67.591% 68.631%, #292929 68.631% 69.671%, #414141 69.671% 70.711%, transparent 70.711%);}
.kp-ui .p-lp-shine, .kp-ui .p-lp-shade {position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 50%;}
.kp-ui .p-lp-shine {background: linear-gradient(315deg, #ffffff00 32%, #ffffff20 50%, #ffffff00 68%), linear-gradient(310deg, #ffffff00 46%, #ffffff13 50%, #ffffff00 54%), linear-gradient(320deg, #ffffff00 46%, #ffffff13 50%, #ffffff00 54%);}
.kp-ui .p-lp-shade {background: radial-gradient(circle at top left, #000000ff 20%, #00000000 80%), radial-gradient(circle at bottom right, #000000ff 20%, #00000000 80%);}
.kp-ui .p-lp-label {position: absolute; left: 4.5em; top: 4.5em; width: 6em; height: 6em; border-radius: 50%; background-color: #111; border: 0.0625em solid #ffffff1c; box-sizing: border-box;}
.kp-ui .p-lp-ring {position: absolute; left: 0; top: 0; right: 0; bottom: 0; font-size: 0.6em; font-weight: 400; color: #f0f0f0;}
.kp-ui .p-lp-ring .ch {position: absolute; left: 50%; top: 6%; width: 2em; height: 44%; margin-left: -1em; text-align: center; line-height: 1; white-space: nowrap; transform-origin: 50% 100%;}
.kp-ui .p-lp-hole {position: absolute; left: 7.4em; top: 7.4em; width: 0.2em; height: 0.2em; border-radius: 50%; background-color: #bbb;}
.kp-ui .p-logo-mark {position: absolute; left: 50%; top: 50%; white-space: nowrap; transform: translate(-50%, -50%) translateY(-45px) rotate(-18deg); font-family: "Arial Black"; font-weight: bold; font-size: min(29.9cqw, 31.9cqh); letter-spacing: .03em; color: rgba(34, 34, 34, .5);}
.kp-ui .p-logo-disc {position: absolute; left: 50%; top: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; border-radius: 50px; background: rgba(255, 255, 255, .12); display: flex; align-items: center; justify-content: center;}
.kp-ui .p-logo-disc:hover {background: rgba(255, 255, 255, .25);}
.kp-ui .p-logo-play {width: 46px; height: 46px; color: rgba(255, 255, 255, .33);}
.kp-ui .p-logo-disc:hover .p-logo-play {color: rgba(255, 255, 255, .62);}
.kp-ui .p-top {position: absolute; left: 0; top: 0; right: 0; height: 32px;}
.kp-ui .p-scrim {position: absolute; left: 0; top: 0; right: 0; height: 56px; background: linear-gradient(to bottom, rgba(10, 10, 10, .92) 0%, rgba(10, 10, 10, .72) 57.1%, rgba(10, 10, 10, .405) 67.9%, rgba(10, 10, 10, .18) 78.6%, rgba(10, 10, 10, .045) 89.3%, rgba(10, 10, 10, 0) 100%);}
.kp-ui .p-title {position: absolute; left: 14px; right: 190px; top: 0; height: 32px; line-height: 32px; white-space: nowrap; overflow: hidden;}
.kp-ui .cap {position: absolute; top: 0; width: 46px; height: 32px; color: #ccc;}
.kp-ui .cap:hover {color: #fff;}
.kp-ui .p-cap-close {right: 0;}
.kp-ui .p-cap-max {right: 46px;}
.kp-ui .p-cap-min {right: 92px;}
.kp-ui .p-cap-pin {right: 138px;}
.kp-ui .p-cap-close:hover {background: #c42b1c;}
.kp-ui.pinned .p-cap-pin {color: #fff;}
.kp-ui .g-min {position: absolute; left: 18px; top: 16px; width: 10px; height: 1px; background: currentColor;}
.kp-ui .g-max {position: absolute; left: 18px; top: 11px; width: 9px; height: 9px; border: 1px solid currentColor;}
.kp-ui .g-res {display: none; position: absolute; width: 7px; height: 7px; border: 1px solid currentColor;}
.kp-ui .g-res1 {left: 21px; top: 9px;}
.kp-ui .g-res2 {left: 16px; top: 14px;}
.kp-ui.fs .g-max {display: none;}
.kp-ui.fs .g-res {display: block;}
.kp-ui .g-close {position: absolute; left: 18px; top: 11px; width: 10px; height: 10px; -webkit-mask-image: url(icons/cap-close.svg); mask-image: url(icons/cap-close.svg); -webkit-mask-size: 100% 100%; mask-size: 100% 100%;}
.kp-ui .g-pin {position: absolute; left: 15px; top: 8px; width: 16px; height: 16px; -webkit-mask-image: url(icons/pin-off.svg); mask-image: url(icons/pin-off.svg); -webkit-mask-size: 100% 100%; mask-size: 100% 100%;}
.kp-ui.pinned .g-pin {-webkit-mask-image: url(icons/pin.svg); mask-image: url(icons/pin.svg);}
.kp-ui .p-bottom {position: absolute; left: 0; right: 0; bottom: 0; height: 74px;}
.kp-ui .p-progress {position: absolute; left: 12px; right: 12px; top: 0; height: 16px;}
.kp-ui .p-track {position: absolute; left: 0; right: 0; top: 7px; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, .25); transition: top .1s, height .1s;}
.kp-ui .p-progress:hover .p-track, .kp-ui.seeking .p-track {top: 6px; height: 4px; border-radius: 2px;}
.kp-ui .p-played {position: absolute; left: 0; top: 0; bottom: 0; width: 0; min-width: 2px; border-radius: 2px; background: #f00;}
.kp-ui .p-chapters {position: absolute; left: 0; right: 0; top: -1px; bottom: -1px;}
.kp-ui .chap {position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(255, 255, 255, .73);}
.kp-ui .p-thumb {position: absolute; top: 1.5px; left: 0; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 6.5px; background: #f00; transform: scale(0); transition: transform .1s;}
.kp-ui .p-progress:hover .p-thumb {transform: scale(1);}
.kp-ui.seeking .p-thumb {transform: scale(1.25);}
.kp-ui .p-tip {display: none; position: absolute; top: -24px; left: 0; height: 20px; line-height: 20px; padding: 0 6px; border-radius: 4px; background: rgba(0, 0, 0, .85); font-size: 11px; white-space: nowrap; transform: translateX(-50%);}
.kp-ui .p-progress:hover .p-tip, .kp-ui.seeking .p-tip {display: block;}
.kp-ui.nodur .p-tip {display: none;}
.kp-ui .p-preview {display: none; position: absolute; bottom: 44px; left: 0; width: 160px; height: 90px; border-radius: 4px; margin-left: -81px; overflow: hidden; background: #000; border: 1px solid rgba(255, 255, 255, .25); pointer-events: none;}
.kp-ui .p-preview-img {display: block; width: 100%; height: 100%;}
.kp-ui.haspv .p-progress:hover .p-preview {display: block;}
.kp-ui.haspv.seeking .p-preview {display: block;}
.kp-ui.nodur .p-preview {display: none;}
.kp-ui .p-row {position: absolute; left: 12px; right: 12px; top: 22px; height: 40px; display: flex; align-items: center; gap: 8px;}
.kp-ui .chip {height: 40px; border-radius: 20px; background: rgba(0, 0, 0, .35); flex: none;}
.kp-ui .btn {width: 40px; height: 40px; border-radius: 20px; flex: none; display: flex; align-items: center; justify-content: center; transition: background-color .15s, transform .1s;}
.kp-ui .btn:hover {background-color: rgba(255, 255, 255, .25);}
.kp-ui .btn:active {transform: scale(.92);}
.kp-ui .chip.btn {background-color: rgba(0, 0, 0, .35);}
.kp-ui .chip.btn:hover {background-color: rgba(124, 124, 124, .51);}
.kp-ui .p-group {display: flex; padding: 0 2px; gap: 2px;}
.kp-ui .p-vol {position: relative; width: 40px; overflow: hidden; transition: width .2s;}
.kp-ui .p-vol:hover, .kp-ui.voldrag .p-vol {width: 116px;}
.kp-ui .p-btn-mute {position: absolute; left: 0; top: 0;}
.kp-ui .p-vol-slider {position: absolute; left: 48px; top: 10px; width: 60px; height: 20px;}
.kp-ui .p-vol-track {position: absolute; left: 0; right: 0; top: 9px; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, .35);}
.kp-ui .p-vol-fill {position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 1px; background: #fff;}
.kp-ui .p-vol-thumb {position: absolute; top: 4px; left: 100%; width: 12px; height: 12px; margin-left: -6px; border-radius: 6px; background: #fff;}
.kp-ui .p-time {padding: 0 14px; display: flex; align-items: flex-start; gap: 2px;}
.kp-ui .dg, .kp-ui .dc, .kp-ui .ds {margin-top: 15px;}
.kp-ui .dg {position: relative; width: 5px; height: 9px; flex: none; color: rgba(255, 255, 255, .15); -webkit-mask-image: url(icons/dg-8.svg); mask-image: url(icons/dg-8.svg); -webkit-mask-size: 100% 100%; mask-size: 100% 100%;}
.kp-ui .dg div {position: absolute; left: 0; top: 0; right: 0; bottom: 0; color: #fff; background-size: 100% 100%;}
.kp-ui .d0 {-webkit-mask-image: url(icons/dg-0.svg); mask-image: url(icons/dg-0.svg);}
.kp-ui .d1 {-webkit-mask-image: url(icons/dg-1.svg); mask-image: url(icons/dg-1.svg);}
.kp-ui .d2 {-webkit-mask-image: url(icons/dg-2.svg); mask-image: url(icons/dg-2.svg);}
.kp-ui .d3 {-webkit-mask-image: url(icons/dg-3.svg); mask-image: url(icons/dg-3.svg);}
.kp-ui .d4 {-webkit-mask-image: url(icons/dg-4.svg); mask-image: url(icons/dg-4.svg);}
.kp-ui .d5 {-webkit-mask-image: url(icons/dg-5.svg); mask-image: url(icons/dg-5.svg);}
.kp-ui .d6 {-webkit-mask-image: url(icons/dg-6.svg); mask-image: url(icons/dg-6.svg);}
.kp-ui .d7 {-webkit-mask-image: url(icons/dg-7.svg); mask-image: url(icons/dg-7.svg);}
.kp-ui .d8 {-webkit-mask-image: url(icons/dg-8.svg); mask-image: url(icons/dg-8.svg);}
.kp-ui .d9 {-webkit-mask-image: url(icons/dg-9.svg); mask-image: url(icons/dg-9.svg);}
.kp-ui .dc {width: 1px; height: 9px; flex: none; color: #fff; -webkit-mask-image: url(icons/dg-col.svg); mask-image: url(icons/dg-col.svg); -webkit-mask-size: 100% 100%; mask-size: 100% 100%;}
.kp-ui .ds {width: 5px; height: 9px; flex: none; margin-left: 2px; margin-right: 2px; color: #fff; -webkit-mask-image: url(icons/dg-sl.svg); mask-image: url(icons/dg-sl.svg); -webkit-mask-size: 100% 100%; mask-size: 100% 100%;}
.kp-ui .spacer {flex: 1;}
.kp-ui .p-btn-sub {display: none;}
.kp-ui.hassub .p-btn-sub {display: flex;}
.kp-ui .p-btn-sub .ico {width: 28px; height: 28px; color: #888;}
.kp-ui.subon .p-btn-sub .ico {color: #fff;}
.kp-ui .p-toast, .kp-ui .p-bezel, .kp-ui .p-bezel-pill, .kp-ui .p-alert, .kp-ui .p-info {pointer-events: none;}
.kp-ui .p-toast {display: none; position: absolute; left: 50%; top: 50%; width: 96px; height: 34px; margin: -17px 0 0 -48px; border-radius: 6px; background: rgba(20, 20, 20, .55); text-align: center; line-height: 34px; font-family: Arial; font-weight: bold; font-size: 20px;}
.kp-ui.toast .p-toast {display: block;}
.kp-ui .p-bezel {position: absolute; left: 50%; top: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; border-radius: 50px; background: rgba(0, 0, 0, .7); display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.75); transition: opacity .25s linear, transform .25s ease-in;}
.kp-ui.bezel .p-bezel {opacity: 1; transform: scale(1); transition: opacity .12s linear, transform .12s ease-out;}
.kp-ui .p-bezel-ico {width: 46px; height: 46px;}
.kp-ui .p-bezel-pill {position: absolute; left: 50%; top: max(15%, 40px); width: 96px; height: 36px; margin-left: -48px; border-radius: 10px; background: rgba(20, 20, 20, .8); text-align: center; line-height: 36px; font-family: Arial; font-weight: bold; font-size: 21px; opacity: 0; transition: opacity .25s linear;}
.kp-ui.bezel.bzvol .p-bezel-pill {opacity: 1; transition: opacity .12s linear;}
.kp-ui.idle .p-bezel, .kp-ui.idle .p-bezel-pill {display: none;}
.kp-ui .p-alert {position: absolute; left: 50%; top: 50%; height: 38px; margin-top: 77px; padding: 0 18px; border-radius: 8px; background: rgba(20, 20, 20, .55); line-height: 38px; font-size: 15px; font-weight: bold; white-space: nowrap; transform: translateX(-50%); opacity: 0; transition: opacity .6s linear;}
.kp-ui.alert .p-alert {opacity: 1; transition: opacity .15s linear;}
.kp-ui .p-info {display: none; position: absolute; left: 14px; top: 40px; max-width: calc(100% - 56px); padding: 10px 14px; border-radius: 8px; background: rgba(20, 20, 20, .55); overflow: hidden;}
.kp-ui.info .p-info {display: block;}
.kp-ui .row {display: flex; height: 20px; line-height: 20px; white-space: pre;}
.kp-ui .k {width: 62px; flex: none; color: #aaa;}
.kp-ui.rtl .p-title {left: 190px; right: 14px; text-align: right;}
.kp-ui.rtl .p-cap-close {right: auto; left: 0;}
.kp-ui.rtl .p-cap-max {right: auto; left: 46px;}
.kp-ui.rtl .p-cap-min {right: auto; left: 92px;}
.kp-ui.rtl .p-cap-pin {right: auto; left: 138px;}
.kp-ui.rtl .p-info {left: auto; right: 14px;}
/* list.css */
.kp-list, .kp-list {margin: 0; height: 100%; background: #202020;}
.kp-list .l-app {display: flex; flex-direction: column; height: 100%; box-sizing: border-box; border-top: 1px solid #3A3A3A; color: #E0E0E0; font-size: 12px; user-select: none; cursor: default;}
.kp-list .l-scroll {flex: 1; overflow-y: auto; overflow-x: hidden;}
.kp-list .l-sizer {position: relative; width: 100%;}
.kp-list .row {position: absolute; width: 100%; height: 24px; line-height: 24px; padding: 0 8px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.kp-list .row.sel {background: #1A364D;}
.kp-list .l-app.blur .row.sel {background: #182838;}
.kp-list .row.act {color: #FFFF00;}
.kp-list .l-band {display: none; position: absolute; z-index: 1; box-sizing: border-box; border: 1px solid #3D84DD; background: rgba(61, 132, 221, 0.25);}
.kp-list .l-bar {flex: none; height: 41px; display: flex; align-items: center; padding: 0 10px; box-sizing: border-box;}
.kp-list .spacer {flex: 1;}
.kp-list .ib {width: 16px; height: 16px; color: #8A847A;}
.kp-list .ib .ic {width: 16px; height: 16px; display: block;}
.kp-list .ib:hover {color: #FAA640;}
.kp-list .ib:active {color: #A66F2C;}
.kp-list .ib.on {color: #FAA640;}
.kp-list .l-btn-random {margin-inline-start: 6px;}
.kp-list .l-btn-add {margin-inline-end: 4px;}
/* base.css */
.kp-settings {--font-family: "Segoe UI", system-ui, -apple-system, sans-serif; --font-size: 12px; --bg: #ffffff; --surface: #f5f5f7; --border: #e0e0e0; --text: #1a1a1a; --text-muted: #888888; --btn-bg: #ffffff; --accent: #3b82f6; --accent-contrast: #ffffff; --nav-on-bg: #ddeefc; --nav-on-border: #a8cce6; --popup-shadow: 0 8px 30px rgb(0 0 0 / 30%); --tooltip-bg: #666666; --alert-bg: #fde8e8; --alert-text: #9b1c1c;}
.kp-settings * {box-sizing: border-box; margin: 0; padding: 0;}
.kp-settings, .kp-settings .kp-app {height: 100%;}
.kp-settings {font-family: var(--font-family); font-size: var(--font-size); color: var(--text); background: var(--bg); line-height: 1.4;}
.kp-settings button, .kp-settings input, .kp-settings select {font-family: inherit; font-size: inherit; color: inherit;}
.kp-settings .hidden {display: none;}
.kp-settings .btn {padding: 7px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--btn-bg); color: var(--text); transition: background 120ms ease, border-color 120ms ease;}
.kp-settings .btn:hover:not(:disabled) {border-color: var(--text-muted);}
.kp-settings .btn:disabled {opacity: 0.5;}
.kp-settings input, .kp-settings select {height: 32px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--btn-bg); color: var(--text); transition: border-color 120ms ease;}
.kp-settings input:hover:not(:disabled), .kp-settings select:hover:not(:disabled) {border-color: var(--text-muted);}
.kp-settings input:focus, .kp-settings select:focus {border-color: var(--accent); outline: none;}
.kp-settings input:disabled, .kp-settings select:disabled {opacity: 0.5;}
/* settings.css */
.kp-settings .settings {display: flex; user-select: none; cursor: default;}
.kp-settings .sidebar {width: 120px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--bg); border-inline-end: 1px solid var(--border);}
.kp-settings .cats {flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 8px 7px 8px 8px;}
.kp-settings .cat {height: 32px; flex-shrink: 0; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--text);}
.kp-settings .cat:hover, .kp-settings .cat.on {background: var(--nav-on-bg); border-color: var(--nav-on-border);}
.kp-settings .side-actions {display: flex; flex-direction: column; padding: 8px 7px 12px 8px;}
.kp-settings .content {flex: 1; min-width: 0; display: flex; flex-direction: column;}
.kp-settings .pane-head {height: 56px; flex-shrink: 0; padding: 18px 24px 0; border-bottom: 1px solid var(--border);}
.kp-settings .pane-title {font-size: 19px; font-weight: 700; line-height: 25px;}
.kp-settings .panes {flex: 1; min-height: 0; overflow-y: auto; padding: 16px 24px;}
.kp-settings .pane {display: flex; flex-direction: column; gap: 12px;}
.kp-settings .pane.hidden {display: none;}
.kp-settings .row {height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;}
.kp-settings select, .kp-settings input {width: 170px;}
.kp-settings .btn.small {height: 32px; width: 60px; padding: 0;}
.kp-settings .btn.wide {width: 100%;}
.kp-settings .pick {display: flex; align-items: center; gap: 8px;}
.kp-settings .pick .btn {display: none;}
.kp-settings .pick.open input {width: 250px;}
.kp-settings .pick.open .btn {display: block;}
.kp-settings .swatch-box {width: 170px; height: 32px; padding: 5px; border: 1px solid var(--border); border-radius: 8px; background: var(--btn-bg); transition: border-color 120ms ease;}
.kp-settings .swatch-box:hover {border-color: var(--text-muted);}
.kp-settings .swatch {display: block; height: 100%; border: 1px solid rgb(0 0 0 / 15%); border-radius: 4px;}
.kp-settings .slide {display: flex; align-items: center; gap: 8px;}
.kp-settings .slider .val {position: absolute; top: 0; left: 0; width: 100%; height: 100%; line-height: 30px; text-align: center;}
.kp-settings .slider {position: relative; width: 170px; height: 32px; border: 1px solid var(--border); border-radius: 8px; background: var(--btn-bg); overflow: hidden; transition: border-color 120ms ease;}
.kp-settings .slider:hover {border-color: var(--text-muted);}
.kp-settings .slider .track {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.kp-settings .slider .fill {height: 100%; background: var(--nav-on-bg); border-inline-end: 2px solid var(--accent);}
.kp-settings .slider .knob {display: none;}
.kp-settings .pane.two {flex-direction: row; gap: 20px; height: 100%;}
.kp-settings .col-main {flex: none;}
.kp-settings .col-side {flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px;}
.kp-settings .btns {display: flex; gap: 10px;}
.kp-settings .btns .btn {flex: 1;}
.kp-settings .grow {flex: 1;}
.kp-settings .hint {color: var(--text-muted); line-height: 1.5;}
.kp-settings .note {color: var(--alert-text); line-height: 1.5;}
.kp-settings .assoc {width: 300px; height: 470px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 4px 0;}
.kp-settings .arow {height: 28px; display: flex; align-items: center; gap: 6px; padding-inline-end: 8px;}
.kp-settings .arow.grp {padding-inline-start: 8px; font-weight: 600;}
.kp-settings .arow.ext {padding-inline-start: 30px;}
.kp-settings .arow .ico {width: 16px; height: 16px;}
.kp-settings .arow .name {flex: 1;}
.kp-settings .cb {width: 16px; height: 16px; border: 1px solid var(--text-muted); border-radius: 4px; background: var(--btn-bg); position: relative; flex: none;}
.kp-settings .cb.on, .kp-settings .cb.mixed {background: var(--accent); border-color: var(--accent);}
.kp-settings .cb.on::after {content: "\2713"; position: absolute; top: 0; left: 0; width: 14px; text-align: center; font-size: 11px; line-height: 14px; color: var(--accent-contrast);}
.kp-settings .cb.mixed::after {content: ""; position: absolute; top: 6px; left: 3px; width: 8px; height: 2px; background: var(--accent-contrast);}
.kp-settings .badge {padding: 0 6px; border: 1px solid transparent; border-radius: 3px; background: var(--alert-bg); color: var(--alert-text); font-size: 11px; line-height: 1.6; white-space: nowrap;}
.kp-settings .badge:hover {border-color: currentColor; cursor: pointer;}
.kp-settings .badge.busy {background: var(--surface); color: var(--text-muted); border-color: transparent;}
.kp-settings .hotkey {cursor: pointer;}
.kp-settings .hotkey.capturing {color: var(--text-muted);}
.kp-settings .about .app-id {display: flex; align-items: center; gap: 14px; height: 64px;}
.kp-settings .app-icon {width: 64px; height: 64px;}
.kp-settings .app-name {font-size: 19px; font-weight: 700;}
.kp-settings .link {color: var(--accent); cursor: pointer;}
.kp-settings .link:hover {text-decoration: underline;}
.kp-settings .notices {height: 240px; margin: 0; padding: 8px 10px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; white-space: pre; font-family: Consolas, monospace; font-size: 12px; color: var(--text-muted); user-select: text;}