/* Scoped reference chat surfaces; the app's shared .modal rules remain intact. */
body:has(.refcp:not([hidden])) #modal-backdrop { background: rgb(0 0 0 / .72); backdrop-filter: blur(0.5674rem); -webkit-backdrop-filter: blur(0.5674rem); }
.modal.refcp { --refcp-text: #e5e5eb; --refcp-muted: #8d8d9e; --refcp-line: #292934; --refcp-teal: #31c8b5; --refcp-purple: #9b7bea; display: flex; flex-direction: column; width: min(51.9716rem, calc(100vw - 2.7234rem)); max-height: calc(100dvh - 2.7234rem); padding: 0; overflow: hidden; color: var(--refcp-text); border: 1px solid #343440; border-radius: 1rem; background: #121218; box-shadow: 0 1.4184rem 5.1064rem #0008; font-family: inherit; font-size: 0.8738rem; line-height: 1.55; }
.modal.refcp-advanced { width: min(51.9994rem, calc(100vw - 2.7234rem)); height: calc(100dvh - 3rem); max-height: calc(100dvh - 3rem); }
.refcp[hidden] { display: none !important; }
/* Native reference context-disable confirmation, measured at root 17.625px. */
.refcp-context-confirm-overlay { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgb(0 0 0 / .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: inherit; font-size: 1rem; line-height: 1.5; }
.refcp-context-confirm-overlay *, .refcp-context-confirm-overlay *::before, .refcp-context-confirm-overlay *::after { box-sizing: border-box; }
.refcp-context-confirm-panel { width: 22rem; max-width: 100%; max-height: calc(100dvh - 3rem); overflow-y: auto; padding: 1.25rem 1.25rem 1.125rem; text-align: center; color: black; background: #16161e; border: 1px solid rgb(239 68 68 / .25); border-radius: .875rem; box-shadow: 0 1.5rem 4rem rgb(0 0 0 / .6); }
.refcp-context-confirm-icon { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin: 0 auto .625rem; border-radius: .75rem; color: rgb(196 165 255 / .95); background: linear-gradient(135deg, rgb(139 92 246 / .18), rgb(239 68 68 / .14)); }
.refcp-context-confirm-icon .refcp-icon { width: 20px; height: 20px; }
.refcp-context-confirm-title { margin: 0 0 .5rem; font-size: .875rem; font-weight: 600; line-height: 1.5; color: rgb(255 255 255 / .95); }
.refcp-context-confirm-text { margin: 0 0 1rem; text-align: left; white-space: pre-line; font-size: .75rem; font-weight: 400; line-height: 1.7; color: rgb(255 255 255 / .6); }
.refcp-context-confirm-actions { display: flex; gap: .5rem; }
.refcp-context-confirm-actions button { display: block; flex: 1; min-width: 0; height: 2.125rem; padding: 0; border: 0; border-radius: .5rem; font-family: inherit; font-size: .75rem; font-weight: 600; line-height: normal; cursor: pointer; }
.refcp-context-confirm-cancel { color: rgb(255 255 255 / .7); background: rgb(255 255 255 / .06); }
.refcp-context-confirm-ok { color: rgb(255 255 255 / .95); background: linear-gradient(135deg, rgb(139 92 246 / .85), rgb(239 68 68 / .7)); }
.refcp-context-confirm-actions button:focus-visible { outline: 2px solid #00bfd0; outline-offset: 2px; }
.refcp *, .refcp *::before, .refcp *::after { box-sizing: border-box; }
.refcp button, .refcp input, .refcp select, .refcp textarea { font: inherit; }
.refcp button { display: inline-flex; align-items: center; justify-content: center; gap: 0.3972rem; min-width: 0; border: 0; cursor: pointer; color: inherit; }
.refcp button:disabled { opacity: .55; cursor: wait; }
.refcp button:focus-visible, .refcp input:focus-visible, .refcp select:focus-visible, .refcp textarea:focus-visible { outline: 0.1135rem solid #55d6c4; outline-offset: 0.1702rem; }
.refcp .refcp-icon { flex: none; display: inline-block; width: 1.1348rem; height: 1.1348rem; vertical-align: middle; }
.refcp-head { flex: none; min-height: 4.8794rem; padding: 1.2482rem 1.5319rem; display: flex; align-items: center; justify-content: space-between; gap: 1.0213rem; border-bottom: 1px solid var(--refcp-line); }
.refcp-heading { display: flex; align-items: center; gap: 0.6809rem; min-width: 0; }
.refcp-heading-icon { display: inline-flex; color: var(--refcp-teal); }
.refcp-heading-icon .refcp-icon { width: 1.3617rem; height: 1.3617rem; }
.refcp h2 { font-size: 0.9375rem; line-height: 1.4; font-weight: 600; margin: 0; color: #eeeeF4; }
.refcp .refcp-heading p { margin: 0.227rem 0 0; font-size: 0.6979rem; line-height: 1.5; color: var(--refcp-muted); }
.refcp-head-actions { display: flex; flex: none; align-items: center; gap: 0.8511rem; }
.refcp .refcp-close { width: 1.7021rem; height: 1.7021rem; padding: 0.227rem; border-radius: 0.3972rem; color: #aaaab8; background: none; }
.refcp .refcp-close:hover { color: white; background: #25252f; }
.refcp .refcp-close .refcp-icon { width: 1.0213rem; height: 1.0213rem; }
.refcp-advanced .refcp-advanced-head { height: 5.9994rem; min-height: 5.9994rem; padding: 1.2499rem 1.3748rem 0; border-bottom: 0; align-items: flex-start; gap: 0.7501rem; }
.refcp-advanced-head .refcp-heading { align-items: flex-start; gap: 0.7501rem; }
.refcp-advanced-head .refcp-heading-icon { width: 2.2491rem; height: 2.2491rem; flex: none; display: flex; align-items: center; justify-content: center; align-self: center; border-radius: 0.5623rem; color: #49d1d3; background: #14434366; }
.refcp-advanced-head .refcp-heading-icon .refcp-icon { width: 1.2499rem; height: 1.2499rem; }
.refcp-advanced .refcp-advanced-head .refcp-heading p { font-size: 0.625rem; line-height: 1.45; margin: 0.1135rem 0 0; }
.refcp-advanced .refcp-advanced-head h2 { line-height: 1.5; }
.refcp-advanced .refcp-advanced-head .refcp-heading h2 + p { font-size: 0.6875rem; line-height: 1.5; }
.refcp-advanced .refcp-advanced-head .refcp-heading .refcp-trigger-note { color: #48bab0; }
.refcp-advanced .refcp-advanced-head .refcp-heading .refcp-pricing-note { color: #737387; }
.refcp-advanced-head .refcp-head-actions { align-self: center; gap: 0.7501rem; padding-top: 0; }
.refcp .refcp-reset { flex: none; width: 5.0928rem; height: 1.604rem; padding: 0; border: 1px solid #2c766d; border-radius: 0.375rem; color: #59d5bd; background: #19403855; font-size: 0.625rem; }
.refcp-advanced .refcp-close { position: absolute; top: 0.8749rem; right: 0.8749rem; width: 1.8746rem; height: 1.8746rem; border-radius: 0.5rem; background: #ffffff09; }
.refcp-advanced .refcp-close .refcp-icon { width: 0.9078rem; height: 0.9078rem; stroke-width: 3; }
.refcp-reset .refcp-icon { width: 0.6809rem; height: 0.6809rem; stroke-width: 4; }
.refcp-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #424250 transparent; }
.refcp-advanced-body { flex: 1; padding: 1.3617rem 1.5887rem; }
.refcp-advanced-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2695rem; }
.refcp-advanced .refcp-advanced-body { padding: 1rem 1.2499rem 0.7501rem; }
.refcp-advanced .refcp-advanced-grid { gap: 0.7501rem; }
.refcp-advanced-grid > div { min-width: 0; padding: 0.8749rem; border: 1px solid #ffffff0d; border-radius: 0.7501rem; background: #ffffff04; }
.refcp-advanced .refcp-setting-section > h3 { margin-bottom: 0; font-size: 0.75rem; color: rgb(255 255 255 / .55); }
.refcp-advanced .refcp-setting-section > h3 .refcp-icon { width: 0.7943rem; height: 0.7943rem; color: #21bfbd; }
.refcp.refcp-advanced .refcp-section-description { margin: 0.1748rem 0 0.625rem; font-size: 0.625rem; line-height: 0.9381rem; }
.refcp h3 { margin: 0; font-weight: 600; font-size: 0.8738rem; line-height: 1.5; }
.refcp-setting-section > h3 { display: flex; align-items: center; gap: 0.4539rem; margin-bottom: 0.9645rem; }
.refcp-setting-section > h3 .refcp-icon { width: 1.078rem; height: 1.078rem; color: #ae98e5; }
.refcp .refcp-section-description { margin: -0.3404rem 0 1.0213rem; color: var(--refcp-muted); font-size: 0.6979rem; line-height: 1.6; }
.refcp-setting { margin: 0 0 0.8511rem; }
.refcp-setting-line { display: flex; align-items: center; justify-content: space-between; gap: 0.7943rem; min-height: 1.5887rem; }
.refcp-setting-name { position: relative; display: flex; align-items: center; gap: 0.3972rem; flex-wrap: wrap; color: #d4d4de; font-size: 0.8113rem; }
.refcp .refcp-badge { display: inline-flex; font-size: 0.6128rem; font-weight: 400; line-height: 1.4; padding: 0.1135rem 0.3404rem; border-radius: 0.227rem; background: #16342f; color: #4dcbb3; white-space: nowrap; }
.refcp .refcp-badge.purple { background: #30253f; color: #ae8fe6; }
.refcp .refcp-badge.warning { background: #422e21; color: #dfa471; }
.refcp .refcp-badge.limited { background: #6b482a40; color: #dbaa70; }
.refcp .refcp-help { display: inline-flex; width: 0.8511rem; height: 0.8511rem; padding: 0; font-size: 0.5674rem; border: 1px solid #737383; border-radius: 50%; background: transparent; color: #9999aa; }
.refcp-help-bubble { box-sizing: border-box; position: fixed; z-index: 99999; width: 20rem; max-width: calc(100vw - 24px); padding: .75rem .875rem; border: 1px solid rgb(255 255 255 / .1); border-radius: .5rem; color: rgb(255 255 255 / .75); background: rgb(24 24 32 / .98); font-family: inherit; font-size: .8125rem; font-weight: 400; line-height: 1.7; box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / .55); transition: background-color .25s, color .2s, border-color .25s, box-shadow .25s; }
.refcp .refcp-switch { position: relative; display: inline-flex; flex: none; width: 1.9858rem; height: 1.078rem; min-height: 1.078rem; padding: 0; border-radius: 1.1348rem; background: #373743; transition: background .16s; }
.refcp-switch span { position: absolute; top: 0.1702rem; left: 0.1702rem; width: 0.7376rem; height: 0.7376rem; border-radius: 50%; background: #aaaab6; transition: transform .16s, background .16s; }
.refcp-switch[aria-checked="true"] { background: #30b9a3; box-shadow: 0 0 0.5674rem #26c4a71a; }
.refcp-switch[aria-checked="true"] span { transform: translateX(0.9078rem); background: #ecfffa; }
.refcp .purple .refcp-switch[aria-checked="true"] { background: #9870c8; box-shadow: 0 0 0.5674rem #976fc51a; }
.refcp .refcp-setting-nested { margin: 0 0 0.9078rem 0.9645rem; padding-left: 0.9078rem; border-left: 1px solid #30303c; }
.refcp-setting-nested .refcp-setting { margin-bottom: 0.6809rem; }
.refcp .refcp-number-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5106rem 0.8511rem; margin: 1.0213rem 0; color: #c7c7d4; font-size: 0.7489rem; }
.refcp .refcp-number-row.compact { margin: 0.6241rem 0 0 0.9645rem; color: #9292a4; font-size: 0.6979rem; }
.refcp .refcp-stepper { display: inline-flex; align-items: center; flex: none; height: 1.7021rem; border: 1px solid #32323f; border-radius: 0.3404rem; overflow: hidden; background: #1a1a23; }
.refcp .refcp-stepper button { width: 1.5319rem; height: 1.5887rem; padding: 0; background: transparent; color: #90909f; font-size: 0.9645rem; }
.refcp .refcp-stepper button:hover { color: #dedee8; background: #30303c; }
.refcp .refcp-stepper input { width: 4.3121rem; height: 1.5887rem; margin: 0; padding: 0 0.1135rem; text-align: center; border: 0; border-radius: 0; background: transparent; color: #c9c9d7; font-size: 0.6979rem; -moz-appearance: textfield; }
.refcp-stepper input::-webkit-inner-spin-button, .refcp-stepper input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.refcp .refcp-auto-choice { display: inline-flex; width: 7.4326rem; justify-content: space-between; padding: 0.227rem 0.5674rem; border: 1px solid #32323f; border-radius: 0.3404rem; color: #c9c9d7; background: #1a1a23; font-size: 0.6979rem; }
.refcp-number-note { width: 100%; font-size: 0.6241rem; color: var(--refcp-muted); }
.refcp-context-limits { margin-top: 0.3404rem; }
.refcp-advanced .refcp-setting, .refcp-advanced .refcp-generation { min-height: 2.2678rem; margin: 0 0 0.4374rem; padding: 0.5rem 0.625rem; border: 1px solid #ffffff0d; border-radius: 0.4374rem; background: #ffffff03; }
.refcp-advanced .refcp-setting:has(+ .refcp-setting-parameters) { margin-bottom: 0; }
.refcp-advanced .refcp-setting-parameters { margin: 0.375rem 0 0.375rem 1rem; padding-left: 0.625rem; border-left: 1px solid #238c7c66; }
.refcp-advanced .refcp-setting-parameters .refcp-number-row.compact { min-height: 2.3299rem; margin: 0; padding: 0.375rem 0.4999rem; border: 1px solid #ffffff0a; border-radius: 0.4374rem; background: #ffffff02; }
.refcp-setting-parameters .refcp-context-limits { margin-top: 0; }
.refcp-advanced .refcp-setting .refcp-switch[aria-checked="true"], .refcp-advanced .refcp-generation .refcp-switch[aria-checked="true"] { background: linear-gradient(110deg, #00b5ca, #8956c6); }
.refcp-advanced .refcp-setting-line { min-height: 1.1348rem; gap: 0.625rem; }
.refcp-advanced .refcp-setting-name, .refcp-advanced .refcp-generation > span { gap: 0.3972rem; font-size: 0.75rem; font-weight: 600; color: rgb(255 255 255 / .72); line-height: 1.5; }
.refcp-advanced .refcp-generation > span { position: relative; }
.refcp-advanced .refcp-setting-name > .refcp-icon, .refcp-advanced .refcp-generation > span > .refcp-icon { width: 0.7943rem; height: 0.7943rem; stroke-width: 3.42857; color: rgb(255 255 255 / .55); }
.refcp-advanced .refcp-badge { padding: 1px 0.2837rem; font-size: 0.5623rem; }
.refcp-advanced .refcp-setting-nested { margin: 0 0 0.4374rem; padding-left: 0; border-left: 0; }
.refcp-advanced .refcp-number-row.compact { min-height: 2.3262rem; margin: 0.227rem 0 0 1rem; padding-left: 0.625rem; border-left: 1px solid #238c7c66; font-size: 0.6875rem; }
.refcp-advanced .refcp-stepper { width: 4.4823rem; height: 1.4752rem; border-radius: 0.3121rem; }
.refcp-advanced .refcp-stepper button { width: 1.1348rem; height: 1.3617rem; flex: none; font-size: 0.7943rem; }
.refcp-advanced .refcp-stepper input { width: 2.0993rem; min-width: 0; height: 1.3617rem; padding: 0 1px; font-size: 0.5844rem; }
.refcp-number-controls { display: flex; flex: none; align-items: center; gap: 0.2837rem; }
.refcp-number-unit { color: #737387; font-size: 0.5844rem; }
/* Five ordinary readonly steppers and the two token groups have separate reference metrics. */
.refcp-advanced .refcp-readonly-stepper, .refcp-advanced .refcp-history-stepper { display: flex; align-items: center; justify-content: normal; flex: 0 0 auto; gap: 0.125rem; width: auto; min-width: auto; height: auto; min-height: auto; margin: 0; padding: 0.0625rem; overflow: visible; border: 1px solid rgb(255 255 255 / .08); border-radius: 0.375rem; background: rgb(255 255 255 / .04); font-size: 1rem; line-height: 1.5; }
.refcp-advanced .refcp-readonly-stepper button, .refcp-advanced .refcp-history-stepper button { width: 1.25rem; min-width: auto; height: 1.25rem; min-height: 0; padding: 0; border: 0; border-radius: 0.25rem; background: transparent; color: rgb(255 255 255 / .55); font-size: 0.8125rem; font-weight: 400; line-height: 1; }
.refcp-advanced .refcp-readonly-stepper .refcp-number-value, .refcp-advanced .refcp-history-stepper .refcp-history-value { display: block; width: auto; min-width: 1.5rem; margin: 0; padding: 0; border: 0; background: transparent; text-align: center; color: rgb(255 255 255 / .85); font-size: 0.75rem; font-weight: 600; line-height: 1.5; }
.refcp-advanced .refcp-readonly-stepper .refcp-number-value-wide { min-width: 3.8rem; }
.refcp-advanced .refcp-history-stepper .refcp-history-value-auto { min-width: 2.2rem; }
.refcp-advanced .refcp-token-input-group { display: flex; align-items: center; flex: 0 0 auto; gap: 0.25rem; height: 1.5rem; margin-left: auto; padding: 0; border: 0; background: transparent; }
.refcp-advanced .refcp-token-step { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 1.375rem; min-width: auto; height: 1.5rem; min-height: 0; margin: 0; padding: 0; border: 1px solid rgb(255 255 255 / .08); border-radius: 0.375rem; background: rgb(255 255 255 / .04); color: rgb(255 255 255 / .55); font-size: 0.875rem; font-weight: 400; line-height: 1; transition: 0.15s; }
.refcp-advanced .refcp-token-field { display: flex; align-items: center; gap: 0.25rem; height: 1.5rem; padding: 0 0.5rem; border: 1px solid rgb(255 255 255 / .08); border-radius: 0.375rem; background: rgb(255 255 255 / .04); }
.refcp-advanced .refcp-token-value { display: block; min-width: 4.5rem; margin: 0; padding: 0; border: 0; background: transparent; color: rgb(255 255 255 / .9); font-size: 0.75rem; font-weight: 600; line-height: 1.5; }
.refcp-advanced .refcp-token-suffix { display: block; flex: 0 0 auto; margin: 0; padding: 0; border: 0; background: transparent; color: rgb(255 255 255 / .35); font-size: 0.625rem; font-weight: 600; line-height: 1.5; }
.refcp-advanced .refcp-auto-choice { width: 4.4823rem; padding: 0.1702rem 0.3972rem; font-size: 0.625rem; }
.refcp-generations { display: grid; gap: 0.8511rem; }
.refcp-advanced .refcp-generations { gap: 0; }
.refcp-generation { display: flex; align-items: center; justify-content: space-between; gap: 0.8511rem; }
.refcp-generation > span { display: flex; align-items: center; gap: 0.5106rem; color: #cfcfdb; font-size: 0.8113rem; }
.refcp-generation > span .refcp-icon { width: 0.9645rem; height: 0.9645rem; color: #9c9cab; }
.refcp-consumption { margin-top: 1.8723rem; padding-top: 1.305rem; border-top: 1px solid var(--refcp-line); }
.refcp-advanced .refcp-consumption { margin-top: 1.0213rem; padding-top: 0.8511rem; border-top-color: #ffffff0d; }
.refcp-advanced .refcp-consumption-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.375rem; }
.refcp-advanced .refcp-consumption .refcp-number-row { min-height: 0; gap: 0.375rem 0.625rem; margin: 0; padding: 0.5rem 0.625rem; border: 1px solid rgb(255 255 255 / .05); border-radius: 0.4375rem; background: rgb(255 255 255 / .01); font-size: 1rem; line-height: 1.5; }
.refcp-advanced .refcp-consumption .refcp-number-row > span { color: rgb(255 255 255 / .72); font-size: 0.75rem; font-weight: 600; line-height: 1.5; }
.refcp-advanced .refcp-number-main { display: flex; align-items: center; gap: .375rem; min-width: 0; }
.refcp-advanced .refcp-number-main .refcp-number-label { color: rgb(255 255 255 / .72); font-size: .75rem; font-weight: 600; line-height: 1.5; }
.refcp-advanced .refcp-consumption .refcp-consumption-full { grid-column: 1 / -1; gap: 0.625rem; }
.refcp-footer { flex: none; padding: 0.9645rem 1.5319rem; border-top: 1px solid var(--refcp-line); background: #121218; }
.refcp-footer-actions { display: flex; justify-content: flex-end; gap: 0.5674rem; align-items: center; }
.refcp-advanced .refcp-advanced-footer { flex: none; min-height: 4.4317rem; padding: 0.875rem 1.25rem 1.125rem; border-top: 0; }
.refcp-advanced-footer > .refcp-primary { width: 100%; height: 2.4317rem; font-size: 0.75rem; }
.refcp .refcp-advanced-footer > .refcp-primary { background: linear-gradient(110deg, #00b5ca, #8956c6); }
.refcp-settings-disclaimer { margin-bottom: 0.7376rem; }
.refcp .refcp-settings-disclaimer p { margin: 0.1135rem 0; color: #79798f; font-size: 0.6128rem; line-height: 1.7; }
.refcp .refcp-primary, .refcp .refcp-secondary { min-height: 2.0426rem; padding: 0.4539rem 0.9645rem; font-size: 0.7489rem; line-height: 1.5; border: 1px solid transparent; border-radius: 0.3972rem; }
.refcp .refcp-primary { color: white; background: linear-gradient(110deg, #269c8e, #7553b1); box-shadow: 0 0 0.8511rem #665ac615; }
.refcp .refcp-primary:hover { filter: brightness(1.09); }
.refcp .refcp-primary .refcp-icon, .refcp .refcp-secondary .refcp-icon { width: 0.9078rem; height: 0.9078rem; }
.refcp .refcp-secondary { color: #b4b4c5; border-color: #363643; background: #202029; }
.refcp .refcp-secondary:hover { color: #eeeef6; background: #2a2a36; }
.refcp .refcp-primary.small { min-height: 1.8156rem; padding: 0.2837rem 0.6809rem; font-size: 0.6979rem; }
.refcp .refcp-status { margin: 0.5674rem 0 0; padding: 0.5674rem 0.6809rem; border: 1px solid #345048; border-radius: 0.3972rem; color: #abc9c1; background: #19352b45; font-size: 0.6979rem; line-height: 1.7; }
.refcp-footer .refcp-status { margin: 0 0 0.6809rem; }
/* Advanced settings: paired 1280x720 reference/local measurement at root 15.6px.
   Keep the other chat surfaces and the shared modal typography unchanged. */
.modal.refcp-advanced { width: min(52rem, calc(100vw - 2.7234rem)); overflow: visible; color: black; font-size: 1rem; font-weight: 400; line-height: 1.5; border-color: rgb(255 255 255 / .06); box-shadow: 0 2rem 5rem rgb(0 0 0 / .6), 0 0 0 1px rgb(6 182 212 / .08); }
.refcp-advanced::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 1rem 1rem 0 0; background: linear-gradient(90deg, transparent, rgb(6 182 212 / .5) 30%, rgb(139 92 246 / .5) 70%, transparent); pointer-events: none; }
.refcp-advanced .refcp-advanced-head { height: auto; min-height: 0; padding: 1.25rem 1.375rem 0; align-items: center; justify-content: normal; gap: .75rem; }
.refcp-advanced-head .refcp-heading { flex: 1; align-items: center; gap: .75rem; }
.refcp-advanced-title-group { flex: 1; min-width: 0; }
.refcp-advanced-head .refcp-heading-icon { width: 2.25rem; height: 2.25rem; border-radius: .5625rem; color: rgb(6 182 212 / .92); background: linear-gradient(135deg, rgb(6 182 212 / .16), rgb(139 92 246 / .12)); }
.refcp-advanced-head .refcp-heading-icon .refcp-icon { width: 20px; height: 20px; stroke-width: 2.16; }
.refcp-advanced .refcp-advanced-head h2 { margin: 0 0 .125rem; color: rgb(255 255 255 / .95); font-size: .9375rem; font-weight: 600; line-height: 1.5; }
.refcp-advanced .refcp-advanced-head .refcp-heading p { margin: 0; font-size: .6875rem; font-weight: 400; line-height: 1.5; color: rgb(255 255 255 / .38); }
.refcp-advanced .refcp-advanced-head .refcp-heading .refcp-trigger-note { margin-top: .1875rem; color: rgb(6 182 212 / .66); font-size: .625rem; }
.refcp-advanced .refcp-advanced-head .refcp-heading .refcp-pricing-note { margin-top: .125rem; color: rgb(255 255 255 / .34); font-size: .625rem; }
.refcp-advanced-head .refcp-head-actions { padding: 0; gap: normal; }
.refcp-advanced .refcp-reset { display: flex; justify-content: normal; width: auto; height: auto; min-width: auto; min-height: 0; margin: 0 2.25rem 0 0; padding: .3125rem .625rem; gap: .3125rem; border: 1px solid rgb(6 182 212 / .28); border-radius: .4375rem; color: rgb(6 182 212 / .9); background: rgb(6 182 212 / .08); font-family: inherit; font-size: .6875rem; font-weight: 600; line-height: normal; transition: .2s; }
.refcp-advanced .refcp-reset .refcp-icon { width: 12px; height: 12px; stroke-width: 4; }
.refcp-advanced .refcp-close { top: .875rem; right: .875rem; display: flex; width: 1.875rem; height: 1.875rem; margin: 0; padding: 0; gap: normal; border: 0; border-radius: .5rem; color: rgb(255 255 255 / .4); background: rgb(255 255 255 / .04); font-family: Arial, sans-serif; font-size: 13.3333px; font-weight: 400; line-height: normal; }
.refcp-advanced .refcp-close .refcp-icon { width: 16px; height: 16px; stroke-width: 3; }
.refcp-advanced .refcp-advanced-body { display: flex; flex-direction: column; gap: .75rem; padding: 1rem 1.25rem .75rem; }
.refcp-advanced .refcp-advanced-grid { gap: .75rem; }
.refcp-advanced-grid > div, .refcp-advanced .refcp-advanced-card { min-width: 0; margin: 0; padding: .875rem; border: 1px solid rgb(255 255 255 / .05); border-radius: .75rem; background: rgb(255 255 255 / .016); transition: border-color .2s; }
.refcp-advanced .refcp-setting-section > h3 { margin: 0 0 .625rem; gap: .375rem; color: black; font-size: 1rem; font-weight: 400; line-height: 1.5; }
.refcp-advanced .refcp-setting-section > h3 > span { color: rgb(255 255 255 / .55); font-size: .75rem; font-weight: 600; line-height: 1.5; letter-spacing: .015rem; }
.refcp-advanced .refcp-setting-section > h3 .refcp-icon { width: 14px; height: 14px; stroke-width: 3.4285714285714284; color: rgb(6 182 212 / .65); }
.refcp.refcp-advanced .refcp-section-description { margin: -.45rem 0 .625rem; color: rgb(255 255 255 / .3); font-size: .625rem; font-weight: 400; line-height: 1.5; }
.refcp-advanced .refcp-setting, .refcp-advanced .refcp-generation { display: flex; align-items: center; justify-content: space-between; min-height: 0; margin: .375rem 0 0; padding: .5rem .625rem; gap: .625rem; border: 1px solid rgb(255 255 255 / .05); border-radius: .4375rem; background: rgb(255 255 255 / .01); transition: .2s; }
.refcp-advanced .refcp-section-description + .refcp-setting, .refcp-advanced .refcp-generations > .refcp-generation:first-child { margin-top: 0; }
.refcp-advanced .refcp-setting:has(+ .refcp-setting-parameters) { margin-bottom: 0; }
.refcp-advanced .refcp-setting-line { width: 100%; min-height: 0; gap: .625rem; }
.refcp-advanced .refcp-setting-name, .refcp-advanced .refcp-generation > span { min-width: 0; flex-wrap: wrap; gap: .375rem; color: black; font-size: 1rem; font-weight: 400; line-height: 1.5; }
.refcp-advanced .refcp-row-label { display: block; color: rgb(255 255 255 / .72); font-size: .75rem; font-weight: 600; line-height: 1.5; }
.refcp-advanced .refcp-setting-name > .refcp-icon, .refcp-advanced .refcp-generation > span > .refcp-icon { width: 14px; height: 14px; stroke-width: 3.4285714285714284; color: rgb(255 255 255 / .55); }
.refcp-advanced .refcp-badge { display: block; margin: 0; padding: .0625rem .375rem; border: 1px solid rgb(34 197 94 / .25); border-radius: .625rem; color: rgb(74 222 128 / .95); background: rgb(34 197 94 / .12); font-size: .625rem; font-weight: 600; line-height: 1.5; }
.refcp-advanced .refcp-badge.limited { border-color: rgb(249 115 22 / .35); color: #fdba74; background: linear-gradient(135deg, rgb(249 115 22 / .16), rgb(234 179 8 / .14)); }
.refcp-advanced .refcp-badge.purple { border-color: rgb(139 92 246 / .32); color: rgb(196 165 255 / .95); background: rgb(139 92 246 / .14); }
.refcp-advanced .refcp-badge.warning { border-color: rgb(248 113 113 / .85); color: #fff1f1; background: linear-gradient(135deg, rgb(239 68 68 / .88), rgb(190 28 28 / .88)); box-shadow: 0 0 .5rem rgb(239 68 68 / .35); }
.refcp-advanced .refcp-help { display: flex; flex: 0 0 auto; width: 1.125rem; height: 1.125rem; min-width: auto; min-height: 0; margin: 0; padding: 0; gap: normal; border: 0; border-radius: 50%; color: rgb(255 255 255 / .3); background: transparent; font-family: Arial, sans-serif; font-size: 13.3333px; font-weight: 400; line-height: normal; transition: color .15s; }
.refcp-advanced .refcp-help .refcp-icon { width: 13px; height: 13px; stroke-width: 3.6923076923076925; }
.refcp-advanced .refcp-number-row.compact .refcp-number-help .refcp-icon { width: 12px; height: 12px; stroke-width: 4; }
.refcp-advanced .refcp-switch { display: block; width: 2rem; height: 1.125rem; min-width: auto; min-height: 0; margin: 0; padding: 0; gap: normal; border-radius: 1rem; color: black; background: rgb(255 255 255 / .12); box-shadow: none; font-size: 1rem; font-weight: 400; line-height: 1.5; transition: background .2s; }
.refcp-advanced .refcp-setting .refcp-switch[aria-checked="true"], .refcp-advanced .refcp-generation .refcp-switch[aria-checked="true"] { background: linear-gradient(135deg, rgb(6 182 212 / .75), rgb(139 92 246 / .6)); box-shadow: none; }
.refcp-advanced .refcp-switch span { top: 2px; left: 2px; width: .875rem; height: .875rem; background: rgb(255 255 255 / .85); box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: transform .2s; }
.refcp-advanced .refcp-switch[aria-checked="true"] span { transform: translateX(.875rem); background: rgb(255 255 255 / .85); }
.refcp-advanced .refcp-setting-nested { display: contents; }
.refcp-advanced .refcp-setting-parameters { display: flex; flex-direction: column; gap: .375rem; margin: .375rem 0 0 1rem; padding-left: .625rem; border-left: 2px solid rgb(6 182 212 / .22); }
/* Actual reference takeover preserves original values and keyboard editing. */
.refcp-advanced .refcp-research-takeover { opacity: .45; pointer-events: none; }
.refcp-advanced .refcp-takeover-tag { display: block; padding: .0625rem .375rem; border: 1px solid rgb(139 92 246 / .32); border-radius: .625rem; color: rgb(196 165 255 / .95); background: rgb(139 92 246 / .14); font-size: .625rem; font-weight: 600; line-height: 1.5; }
.refcp-advanced .refcp-research-hint { margin: .375rem 0 0; padding: .375rem .625rem; border-left: 2px solid rgb(139 92 246 / .4); color: rgb(196 165 255 / .8); font-size: .625rem; font-weight: 400; line-height: 1.6; }
.refcp-advanced .refcp-consumption .refcp-consumption-full.refcp-research-takeover { flex-wrap: nowrap; }
.refcp-advanced .refcp-consumption-full.refcp-research-takeover .refcp-number-main { flex-wrap: wrap; }
.refcp-advanced .refcp-consumption-full.refcp-research-takeover .refcp-takeover-tag { flex: 0 0 auto; white-space: nowrap; }
.refcp-advanced .refcp-consumption-full.refcp-research-takeover .refcp-stepper button { flex: 0 1 auto; gap: normal; }
.refcp-advanced .refcp-context-limits { display: flex; flex-direction: column; gap: .375rem; margin: 0; }
.refcp-advanced .refcp-context-limits > .refcp-number-note { display: block; width: auto; margin: 0; padding-left: .5rem; color: rgb(255 255 255 / .32); font-size: .625rem; font-weight: 400; line-height: 1.5; }
.refcp-advanced .refcp-setting-parameters .refcp-number-row.compact { flex-wrap: nowrap; justify-content: normal; min-height: 0; margin: 0; padding: .375rem .5rem; gap: .3125rem; border: 1px solid rgb(255 255 255 / .04); border-radius: .4375rem; color: black; background: rgb(255 255 255 / .008); font-size: 1rem; line-height: 1.5; }
.refcp-advanced .refcp-number-row.compact > span:first-child { flex: 1; color: rgb(255 255 255 / .5); font-size: .6875rem; font-weight: 500; line-height: 1.5; }
.refcp-advanced .refcp-token-step { gap: normal; }
.refcp-advanced .refcp-generations { display: block; }
.refcp-advanced .refcp-consumption { margin: 0; padding: .875rem; border: 1px solid rgb(255 255 255 / .05); }
.refcp-advanced .refcp-consumption .refcp-number-row { color: black; }
.refcp-advanced .refcp-advanced-footer { display: block; min-height: 0; padding: .875rem 1.25rem 1.125rem; border-top: 1px solid rgb(255 255 255 / .05); background: transparent; }
.refcp-advanced .refcp-advanced-footer > .refcp-primary { display: flex; width: 100%; height: 2.375rem; min-height: 0; margin: 0; padding: 0; gap: normal; border: 0; border-radius: .625rem; color: rgb(255 255 255 / .95); background: linear-gradient(135deg, rgb(6 182 212 / .75), rgb(139 92 246 / .6)); box-shadow: none; font-family: inherit; font-size: .8125rem; font-weight: 600; line-height: normal; letter-spacing: .04em; transition: .25s; }
.refcp-advanced .refcp-advanced-footer > .refcp-primary:hover { filter: none; background: linear-gradient(135deg, rgb(6 182 212 / .9), rgb(139 92 246 / .75)); box-shadow: 0 .375rem 1.25rem rgb(6 182 212 / .2); }
.modal.refcp-memory { width: min(30rem, calc(100vw - 2.7234rem)); height: min(33.9858rem, calc(100dvh - 2.7234rem)); }
.refcp-memory .refcp-head { min-height: 5.2199rem; padding: 1.2482rem; }
.refcp-memory .refcp-heading-icon { color: #a184e9; }
.refcp-memory .refcp-head-actions { gap: 0.4539rem; }
.refcp-memory-toolbar { margin: 0.9645rem 1.2482rem 0; padding: 0.6241rem 0.7376rem; display: flex; justify-content: space-between; align-items: center; gap: 0.5674rem; border: 1px solid #2e2e3d; border-radius: 0.4539rem; background: #1c1c26; font-size: 0.6979rem; }
.refcp-memory-toolbar > span { display: flex; align-items: center; gap: 0.4539rem; color: #bbb9cc; }
.refcp-memory-toolbar .refcp-icon { width: 0.9078rem; height: 0.9078rem; color: #b39ae7; }
.refcp .refcp-text-button { padding: 0; color: #9995b1; font-size: 0.6979rem; background: transparent; }
.refcp-memory-list { flex: 1; display: flex; flex-direction: column; padding: 1.1348rem 1.2482rem; }
.refcp-memory-empty { display: flex; height: 18.7234rem; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.refcp-memory-list > .refcp-memory-empty { flex: 1; min-height: 17.0213rem; border: 1px solid transparent; border-radius: 1rem; background: linear-gradient(130deg, #191923, #211b2b) padding-box, linear-gradient(135deg, #66558c, #443054 58%, #72658e) border-box; box-shadow: inset 0 0 2.156rem #72509a08; }
.refcp-empty-brain { display: flex; align-items: center; justify-content: center; width: 4.3121rem; height: 4.3121rem; margin: 0 0 1.0213rem; border-radius: 50%; background: #242032; color: #9b82cc; }
.refcp-empty-brain .refcp-icon { width: 2.0993rem; height: 2.0993rem; stroke-width: 1.3; }
.refcp .refcp-memory-empty h3 { margin-bottom: 0.5106rem; font-size: 0.9375rem; font-weight: 500; color: #d0cadf; }
.refcp .refcp-memory-empty p { margin: 0 0 1.3617rem; color: #878496; font-size: 0.6979rem; line-height: 1.8; }
.refcp .refcp-interview { padding: 0.5106rem 0.9078rem; border: 1px solid #554572; border-radius: 0.4539rem; background: #292037; color: #baa0e1; font-size: 0.7489rem; }
.refcp .refcp-interview .refcp-icon { width: 0.9645rem; height: 0.9645rem; }
.refcp-memory-empty.small { height: 13.0496rem; color: #646171; }
.refcp-memory-empty.small > .refcp-icon { width: 2.383rem; height: 2.383rem; margin-bottom: 1.0213rem; }
.refcp-memory-empty.small p { margin: 0; }
.refcp-memory-records { padding: 1.305rem; }
.refcp .refcp-memory-records > p { margin: 1.1348rem 0; font-size: 0.7489rem; color: #9390a5; line-height: 1.9; }
.refcp-memory-records > .refcp-primary { width: 100%; }
.refcp-memory-card { padding: 0.8511rem; margin-bottom: 0.6809rem; border: 1px solid #34303f; border-radius: 0.4539rem; background: #1c1927; }
.refcp .refcp-memory-card p { margin: 0.5106rem 0 0; font-size: 0.7489rem; color: #c3bcd4; }
.refcp-form-scroll { flex: 1; padding: 1.2482rem 1.4184rem; }
.refcp-form-title { display: flex; align-items: center; gap: 0.6241rem; margin-bottom: 1.305rem; }
.refcp .refcp-back { width: 1.5319rem; height: 1.5319rem; padding: 0.227rem; color: #9292a5; background: transparent; }
.refcp-back .refcp-icon { width: 1.078rem; height: 1.078rem; }
.refcp label.refcp-field, .refcp div.refcp-field { display: flex; flex-direction: column; gap: 0.5106rem; margin: 0 0 1.2482rem; color: #c9c9d6; font-size: 0.7489rem; }
.refcp-field > span { display: flex; align-items: center; justify-content: space-between; gap: 0.5674rem; }
.refcp .refcp-field small { display: inline; margin: 0; font-weight: 400; font-size: 0.6525rem; color: #6e6e82; }
.refcp .refcp-field input, .refcp .refcp-field textarea, .refcp .refcp-field select { width: 100%; height: auto; min-height: 2.156rem; padding: 0.5106rem 0.6241rem; border: 1px solid #333340; border-radius: 0.3972rem; background: #1b1b25; color: #e1e1eb; font-size: 0.7489rem; line-height: 1.65; }
.refcp .refcp-field textarea { resize: vertical; }
.refcp-field input::placeholder, .refcp-field textarea::placeholder, .refcp-search input::placeholder { color: #636377; opacity: 1; }
.refcp-image-upload { display: flex; flex-wrap: wrap; gap: 0.5106rem 0.6809rem; align-items: center; }
.refcp-file-name { color: #89899a; font-size: 0.6525rem; overflow-wrap: anywhere; }
.refcp-file-preview { flex-basis: 100%; }
.refcp-file-preview img { max-width: 9.078rem; max-height: 7.9433rem; display: block; object-fit: contain; border-radius: 0.3972rem; }
.modal.refcp-skills { width: min(53.3333rem, calc(100vw - 2.7234rem)); height: min(88dvh, calc(100dvh - 2.7234rem)); }
.refcp-skills .refcp-head { min-height: 4.3121rem; padding: 1.1348rem 1.3617rem; }
.refcp-skills-intro { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0.9078rem 1.3617rem 0; padding: 0.6241rem 0; border: 1px solid #2e2e3c; border-radius: 0.5106rem; background: #1b1b25; }
.refcp-skills-intro > div { padding: 0 0.8511rem; }
.refcp-skills-intro > div + div { border-left: 1px solid #343442; }
.refcp-skills-intro > div > span { display: flex; gap: 0.3972rem; align-items: center; font-size: 0.7489rem; color: #b8a6e7; }
.refcp-skills-intro > div:nth-child(2) > span { color: #5bc9b5; }
.refcp-skills-intro .refcp-icon { width: 0.9645rem; height: 0.9645rem; }
.refcp .refcp-skills-intro p { margin: 0.227rem 0 0; color: #8f8fA4; font-size: 0.6525rem; line-height: 1.65; }
.refcp-skills-intro b { margin-left: 0.4539rem; font-weight: 400; color: #aaaabc; white-space: nowrap; }
.refcp-skills-intro em { font-size: 0.6128rem; font-style: normal; padding: 1px 0.2837rem; border-radius: 0.227rem; background: #214a3c; color: #66d0ae; }
.refcp-skills-status { display: flex; justify-content: space-between; gap: 0.8511rem; padding: 0.8511rem 1.3617rem 0; color: #9a9aaa; font-size: 0.6979rem; }
.refcp-skills-status strong { font-weight: 500; color: var(--refcp-teal); }
.refcp .refcp-muted { color: #737389; }
.refcp-skills-filter { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 1.1348rem; padding: 0.9645rem 1.3617rem 0.6809rem; }
.refcp-search { display: flex; align-items: center; flex: 1; gap: 0.4539rem; min-width: 0; padding: 0 0.6241rem; height: 2.0426rem; border: 1px solid #333341; border-radius: 0.3972rem; background: #1d1d27; color: #7b7b92; }
.refcp-search .refcp-icon { width: 0.9078rem; height: 0.9078rem; }
.refcp .refcp-search input { width: 100%; height: 1.8156rem; border: 0; padding: 0; font-size: 0.6979rem; color: #dadae8; background: transparent; }
.refcp-source-tabs { display: flex; align-items: center; flex: none; gap: 0.1702rem; padding: 0.1702rem; border-radius: 0.3972rem; background: #20202a; }
.refcp .refcp-source-tabs button { padding: 0.2837rem 0.6809rem; border-radius: 0.2837rem; background: transparent; color: #9898a9; font-size: 0.6979rem; }
.refcp .refcp-source-tabs button.active { color: #6ce0c8; background: #21443d; }
.refcp-category-tabs { display: flex; flex: none; gap: 0.3972rem; padding: 0 1.3617rem 0.9645rem; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #3a3a48 transparent; }
.refcp .refcp-category-tabs button { flex: none; padding: 0.227rem 0.5106rem; color: #9292a5; background: #21212c; border: 1px solid #2d2d3b; border-radius: 0.3404rem; font-size: 0.6525rem; line-height: 1.4; }
.refcp .refcp-category-tabs button.active { color: #55d0b7; border-color: #2c6a5d; background: #1a3d34; }
.refcp-skills-body { flex: 1; padding: 1px 1.3617rem 1.3617rem; }
.refcp-skill-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 0.5674rem; }
.refcp-skill-card { position: relative; display: flex; flex-direction: column; min-width: 0; height: 8.5674rem; padding: 0.6809rem; border: 1px solid #343442; border-radius: 0.5674rem; background: #1e1e29; cursor: pointer; transition: border-color .15s, background .15s; }
.refcp-skill-card:hover { border-color: #565567; }
.refcp-skill-card:focus-visible { outline: 0.1135rem solid #55d6c4; outline-offset: 0.1135rem; }
.refcp-skill-card.is-selected { border-color: #3f766c; background: #1b2b2a; }
.refcp-skill-card.is-resident { border-color: #71628f; background: #272133; }
.refcp-card-checkbox { position: absolute; top: 0.7376rem; right: 0.7376rem; display: flex; align-items: center; justify-content: center; width: 0.9078rem; height: 0.9078rem; border: 1px solid #505063; border-radius: 50%; background: #262631; color: #d7fff4; }
.refcp-card-checkbox .refcp-icon { width: 0.6241rem; height: 0.6241rem; stroke-width: 2.2; }
.is-selected .refcp-card-checkbox { border-color: #35c7a9; background: #35ad92; }
.refcp-skill-usage { display: flex; align-items: center; gap: 0.227rem; color: #62627c; font-size: 0.6128rem; }
.refcp-skill-usage .refcp-icon { width: 0.6809rem; height: 0.6809rem; }
.refcp .refcp-skill-title { display: flex; align-items: center; justify-content: flex-start; gap: 0.5106rem; padding: 0; min-width: 0; background: transparent; text-align: left; }
.refcp-skill-title > span:last-child { min-width: 0; padding-right: 0.7943rem; }
.refcp-skill-title b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8113rem; font-weight: 500; color: #e0e0e9; }
.refcp .refcp-skill-title small { margin: 0.1702rem 0 0; font-size: 0.6128rem; color: #77778d; }
.refcp .refcp-card-pills { display: flex; align-items: center; flex-wrap: wrap; gap: 0.2837rem; line-height: 1.25; }
.refcp-card-pills > span { padding: 1px 0.227rem; border-radius: 0.1702rem; white-space: nowrap; font-size: 0.556rem; }
.refcp-card-pills .refcp-source-pill { color: #74baa9; background: #25433a; }
.refcp-card-pills .refcp-category-pill { color: #9292ae; background: #2c2c3d; }
.refcp-skill-avatar { display: flex; flex: none; align-items: center; justify-content: center; width: 2.0426rem; height: 2.0426rem; overflow: hidden; border-radius: 0.4539rem; color: #58c0b4; background: #173a34; }
.refcp-skill-avatar img { width: 100%; height: 100%; object-fit: cover; }
.refcp-skill-avatar .refcp-icon { width: 1.3617rem; height: 1.3617rem; }
.refcp .refcp-skill-card > p { display: -webkit-box; flex: 1; min-height: 0; max-height: 2.3035rem; margin: 0.4539rem 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-size: 0.6979rem; line-height: 1.65; color: #9999b0; overflow-wrap: anywhere; }
.refcp-skill-tags { display: flex; flex-wrap: wrap; gap: 0.2837rem; margin-bottom: 0.6809rem; }
.refcp-skill-tags span { color: #89899d; background: #292938; border-radius: 0.227rem; padding: 1px 0.2837rem; font-size: 0.6128rem; }
.refcp-skill-controls { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 0.4539rem; margin-top: auto; }
.refcp .refcp-resident, .refcp .refcp-skill-select { min-height: 1.305rem; height: 1.305rem; padding: 0.1135rem 0.3972rem; border: 1px solid #41414f; border-radius: 0.2837rem; background: transparent; font-size: 0.6128rem; color: #9494a8; }
.refcp .refcp-resident .refcp-icon, .refcp .refcp-skill-select .refcp-icon { width: 0.7376rem; height: 0.7376rem; }
.refcp .refcp-resident.active { color: #c5aae7; border-color: #6c558d; background: #49325c55; }
.refcp .refcp-skill-select.active { color: #74d7c0; border-color: #327263; background: #174f3d55; }
.refcp-skills-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 11.3475rem; color: #777789; }
.refcp-skills-empty > .refcp-icon { width: 1.8156rem; height: 1.8156rem; }
.refcp .refcp-skills-empty p { font-size: 0.7489rem; color: #777789; }
.refcp-skill-create-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: 1.3617rem; }
.refcp-avatar-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5674rem; }
.refcp-content-field { height: 100%; }
.refcp-content-field textarea { flex: 1; min-height: 15.0355rem !important; }
.refcp-content-tools { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.4539rem; }
.refcp .refcp-content-tools .refcp-secondary { min-height: 1.7021rem; padding: 0.2837rem 0.5106rem; font-size: 0.6525rem; }
.refcp .refcp-ai-polish { color: #aa8cdd; }
.refcp-load-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7376rem; }
.refcp .refcp-load-modes > button { justify-content: flex-start; align-items: flex-start; gap: 0.6809rem; padding: 0.7376rem; border: 1px solid #383845; border-radius: 0.4539rem; background: #1c1c27; color: #9292ab; text-align: left; }
.refcp .refcp-load-modes > button.active { border-color: #408476; background: #193c33; color: #71d8c1; }
.refcp-load-modes > button > span { flex: 1; }
.refcp-load-modes b { display: block; margin-bottom: 0.227rem; color: #cecedf; font-size: 0.7489rem; font-weight: 500; }
.refcp .refcp-load-modes small { display: block; color: #8e9f9a; font-size: 0.6525rem; line-height: 1.65; }
.refcp-tool-choices { display: flex; flex-wrap: wrap; gap: 0.4539rem; }
.refcp .refcp-tool-choices > button { padding: 0.2837rem 0.5674rem; border: 1px solid #373745; border-radius: 0.3404rem; background: #21212c; color: #9999af; font-size: 0.6979rem; }
.refcp .refcp-tool-choices > button.active { border-color: #3b796a; background: #203f35; color: #63d0b3; }
.refcp-tool-choices .refcp-icon { width: 0.8511rem; height: 0.8511rem; }
.refcp-skill-detail { padding: 1.4184rem; }
.refcp .refcp-skill-detail > p { color: #a4a4b7; font-size: 0.7489rem; line-height: 1.8; }
.refcp-skill-detail pre { padding: 0.8511rem; overflow-wrap: anywhere; white-space: pre-wrap; border: 1px solid #333342; border-radius: 0.4539rem; color: #bdbdd2; font: inherit; font-size: 0.6979rem; background: #1c1c27; }
@media (max-width: 700px) {
  .modal.refcp { width: calc(100vw - 1.3617rem); max-height: calc(100dvh - 1.3617rem); border-radius: 0.6809rem; }
  .refcp-head, .refcp-skills .refcp-head, .refcp-memory .refcp-head { min-height: 4.0851rem; padding: 0.9078rem; gap: 0.5674rem; }
  .refcp-heading { gap: 0.5106rem; }
  .refcp-heading-icon .refcp-icon { width: 1.1915rem; height: 1.1915rem; }
  .refcp .refcp-heading p { max-width: 12.1986rem; font-size: 0.6241rem; }
  .refcp-head-actions { gap: 0.3404rem; }
  .refcp .refcp-primary.small { padding: 0.2837rem 0.4539rem; font-size: 0.6525rem; white-space: nowrap; }
  .refcp .refcp-close { width: 1.4184rem; height: 1.4184rem; }
  .refcp-advanced-body { padding: 1.1348rem 1.0213rem; }
  .refcp-advanced-grid { grid-template-columns: 1fr; gap: 1.5887rem; }
  .modal.refcp-advanced { width: calc(100vw - 3rem); height: calc(100dvh - 3rem); max-height: calc(100dvh - 3rem); border-radius: 1rem; }
  .refcp-advanced .refcp-advanced-head { position: static; min-height: 0; height: auto; padding: 1.25rem 1.375rem 0; }
  .refcp-advanced-head .refcp-heading { width: auto; }
  .refcp-advanced-head .refcp-heading-icon { width: 2.25rem; height: 2.25rem; align-self: center; }
  .refcp-advanced-head .refcp-heading > div { min-width: 0; }
  .refcp-advanced-head .refcp-heading h2 { min-height: 0; padding-right: 0; }
  .refcp-advanced .refcp-advanced-head .refcp-heading p { max-width: none; }
  .refcp-advanced-head .refcp-head-actions { position: static; top: auto; right: auto; gap: normal; padding: 0; }
  .refcp-advanced .refcp-close { width: 1.875rem; height: 1.875rem; }
  .refcp-advanced .refcp-advanced-body { padding: 1rem 1.25rem .75rem; }
  .refcp-advanced .refcp-advanced-grid { grid-template-columns: 1fr; gap: .75rem; }
  .refcp-advanced-grid > div { padding: .875rem; }
  .refcp-advanced .refcp-consumption-grid { grid-template-columns: 1fr; }
  .refcp-advanced .refcp-advanced-footer { min-height: 0; padding: .875rem 1.25rem 1.125rem; }
  .refcp-footer { padding: 0.7943rem 1.0213rem; }
  .modal.refcp-memory { width: calc(100vw - 1.3617rem); height: min(34.0426rem, calc(100dvh - 1.3617rem)); }
  .refcp-memory .refcp-heading p { max-width: 8.7943rem; }
  .refcp-memory-toolbar { margin: 0.8511rem 0.9078rem 0; }
  .refcp-memory-list { padding: 0.9078rem; }
  .refcp-form-scroll, .refcp-memory-records { padding: 1.0213rem; }
  .modal.refcp-skills { width: calc(100vw - 1.3617rem); height: calc(100dvh - 1.3617rem); }
  .refcp-skills-intro { grid-template-columns: 1fr 1fr; gap: 0; margin: 0.7943rem 0.9078rem 0; padding: 0.5674rem 0; }
  .refcp-skills-intro > div { padding: 0 0.5674rem; }
  .refcp-skills-intro b { display: block; margin: 0.1702rem 0 0; }
  .refcp-skills-status { flex-wrap: wrap; gap: 0.227rem; padding: 0.7376rem 0.9078rem 0; font-size: 0.6525rem; }
  .refcp-skills-filter { flex-wrap: wrap; gap: 0.6809rem; padding: 0.7943rem 0.9078rem 0.6809rem; }
  .refcp-search { flex-basis: 100%; }
  .refcp-source-tabs { width: 100%; }
  .refcp-source-tabs > button { flex: 1; }
  .refcp-category-tabs { padding: 0 0.9078rem 0.7943rem; }
  .refcp-skills-body { padding: 0 0.9078rem 1.0213rem; }
  .refcp-skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5674rem; }
  .refcp-skill-card { padding: 0.6809rem; }
  .refcp-skill-title { align-items: flex-start !important; gap: 0.4539rem !important; flex-wrap: wrap; }
  .refcp-skill-avatar { width: 2.0426rem; height: 2.0426rem; }
  .refcp-skill-title b { font-size: 0.7489rem; }
  .refcp .refcp-skill-title small { font-size: 0.5674rem; }
  .refcp .refcp-skill-card > p { font-size: 0.6525rem; }
  .refcp-skill-controls { align-items: stretch; }
.refcp-skill-controls > button { white-space: nowrap; }
  .refcp .refcp-resident, .refcp .refcp-skill-select { font-size: 0.6128rem; padding: 0.227rem 0.2837rem; }
  .refcp-skill-create-grid { grid-template-columns: 1fr; gap: 0; }
  .refcp-content-field { height: auto; }
  .refcp-load-modes { grid-template-columns: 1fr; gap: 0.5106rem; }
  .refcp-load-modes > button { padding: 0.6241rem !important; }
}
@media (max-width: 360px) {
  .refcp-skills-intro { grid-template-columns: 1fr; }
  .refcp-skills-intro > div { padding: 0.4539rem 0.5674rem; }
  .refcp-skills-intro > div + div { border-left: 0; border-top: 1px solid #343442; }
  .refcp-skills-intro p { font-size: 0.6128rem !important; }
  .refcp-skills-intro b { display: inline; margin-left: 0.2837rem; }
  .refcp-skill-grid { grid-template-columns: 1fr; }
  .refcp-skill-title { flex-wrap: nowrap; }
  .refcp-memory .refcp-heading { gap: 0.2837rem; }
  .refcp-memory .refcp-heading p { max-width: 7.0922rem; font-size: 0.5674rem; }
  .refcp-memory .refcp-heading-icon { display: none; }
}
@media (max-width: 480px) {
  .refcp-skill-grid { grid-template-columns: 1fr; }
  .refcp .refcp-skill-title { flex-wrap: nowrap; align-items: center !important; }
}
@media (prefers-reduced-motion: reduce) { .refcp-switch, .refcp-switch span { transition: none; } }

/* v109: observed creation component only. The catalogue and advanced panels
   retain their existing layouts. Source: create-skill/selected 20261011. */
body:has(.refcp-skills-create:not([hidden])) #modal-backdrop { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.modal.refcp.refcp-skills-create { width: min(940px, 96vw); height: auto; max-height: min(88vh, 820px); padding: 1.1rem 1.2rem 1rem; border-radius: 1rem; background: rgb(18 18 24); border: 1px solid rgb(255 255 255 / .06); box-shadow: 0 2rem 5rem rgb(0 0 0 / .6), 0 0 0 1px rgb(6 182 212 / .08); color: black; font-family: inherit; font-size: 1rem; font-weight: 400; line-height: 1.5; }
.modal.refcp.refcp-skills-create { max-width: calc(100vw - 3rem); }
.refcp-skills-create button { min-width: 0; min-height: 0; margin: 0; padding: 0; gap: normal; font-family: Arial, sans-serif; font-size: 13.3333px; font-weight: 400; line-height: normal; }
.refcp-skills-create .refcp-skill-create-icon { display: block; flex: none; }
.refcp-skills-create .refcp-skill-create-close { position: absolute; top: .85rem; right: .9rem; z-index: 2; width: 27px; height: 27px; padding: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgb(255 255 255 / .05); border: 0; color: rgb(255 255 255 / .5); cursor: pointer; transition: .18s; }
.refcp-skills-create .refcp-skill-create-close:hover { background: rgb(255 255 255 / .1); color: white; }
.refcp-skills-create .refcp-skill-create-header { display: flex; align-items: center; flex: 0 0 auto; gap: .7rem; margin-bottom: 1.05rem; padding-right: 2.4rem; }
.refcp-skills-create .refcp-skill-create-title-group { min-width: 0; }
.refcp-skills-create .refcp-skill-create-title-group h3 { margin: 0 0 .125rem; font-size: .9375rem; font-weight: 600; line-height: 1.5; color: rgb(255 255 255 / .95); }
.refcp-skills-create .refcp-skill-create-title-group p { margin: 0; font-size: .6875rem; line-height: 1.5; color: rgb(255 255 255 / .38); }
.refcp-skills-create .refcp-skill-create-back { width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: rgb(255 255 255 / .05); border: 0; color: rgb(255 255 255 / .6); cursor: pointer; transition: .18s; }
.refcp-skills-create .refcp-skill-create-back:hover { background: rgb(255 255 255 / .1); color: white; }
.refcp-skills-create .refcp-skill-create-body { flex: 1 1 0%; overflow-y: auto; min-height: min(210px, 32vh); padding-right: 5px; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / .12) transparent; }
.refcp-skills-create .refcp-skill-create-body::-webkit-scrollbar { width: 6px; }
.refcp-skills-create .refcp-skill-create-body::-webkit-scrollbar-track { background: transparent; }
.refcp-skills-create .refcp-skill-create-body::-webkit-scrollbar-thumb { background: rgb(255 255 255 / .12); border-radius: 6px; }
.refcp-skills-create .refcp-skill-create-body::-webkit-scrollbar-thumb:hover { background: rgb(6 182 212 / .45); }
.refcp-skills-create .refcp-skill-create-form { display: flex; flex-direction: column; gap: 1rem; padding: .15rem .1rem .4rem; }
.refcp-skills-create .refcp-skill-create-form-row { display: flex; gap: .85rem; align-items: flex-start; }
.refcp-skills-create .refcp-skill-create-field { display: flex; flex-direction: column; gap: .3rem; margin: 0; color: inherit; font: inherit; }
.refcp-skills-create .refcp-skill-create-field-grow { flex: 1 1 0%; min-width: 0; }
.refcp-skills-create .refcp-skill-create-field-label, .refcp-skills-create .refcp-skill-create-content-label { font-size: .73rem; font-weight: 600; color: rgb(255 255 255 / .6); }
.refcp-skills-create .refcp-skill-create-req { color: rgb(248 113 113 / .9); font-style: normal; margin-left: 2px; }
.refcp-skills-create .refcp-skill-create-mt { margin-top: .35rem; }
.refcp-skills-create .refcp-skill-create-mt-s { margin-top: .15rem; }
.refcp-skills-create .refcp-skill-create-field-hint, .refcp-skills-create .refcp-skill-create-content-hint { font-size: .65rem; color: rgb(255 255 255 / .3); line-height: 1.45; }
.refcp-skills-create .refcp-skill-create-field input, .refcp-skills-create .refcp-skill-create-content-box textarea { width: 100%; height: auto; min-height: 0; margin: 0; box-sizing: border-box; background: rgb(255 255 255 / .02); border: 1px solid rgb(255 255 255 / .07); border-radius: .5rem; padding: .52rem .68rem; color: rgb(255 255 255 / .92); font-size: .76rem; font-weight: 400; line-height: normal; outline: none; resize: vertical; font-family: inherit; transition: border-color .2s; }
.refcp-skills-create .refcp-skill-create-field input:focus, .refcp-skills-create .refcp-skill-create-content-box textarea:focus { border-color: rgb(6 182 212 / .45); }
.refcp-skills-create .refcp-skill-create-avatar-upload { display: flex; flex-direction: column; align-items: center; gap: .35rem; width: 76px; flex: 0 0 auto; }
.refcp-skills-create .refcp-skill-create-avatar-box { position: relative; overflow: hidden; width: 72px; height: 72px; border-radius: .75rem; cursor: pointer; display: flex; align-items: center; justify-content: center; background: rgb(255 255 255 / .02); border: 1.5px dashed rgb(255 255 255 / .14); color: rgb(255 255 255 / .28); font-family: inherit; font-size: 1rem; line-height: 1.5; transition: .18s; }
.refcp-skills-create .refcp-skill-create-avatar-box:hover { border-color: rgb(6 182 212 / .45); background: rgb(6 182 212 / .05); color: rgb(6 182 212 / .9); }
.refcp-skills-create .refcp-skill-create-avatar-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.refcp-skills-create .refcp-skill-create-avatar-hint { text-align: center; }
.refcp-skills-create .refcp-skill-create-content-field { display: flex; flex-direction: column; gap: .3rem; }
.refcp-skills-create .refcp-skill-create-content-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.refcp-skills-create .refcp-skill-create-content-head-actions { display: flex; align-items: center; gap: .35rem; }
.refcp-skills-create .refcp-skill-create-mini-btn { display: inline-flex; align-items: center; gap: 3px; padding: .2rem .44rem; border-radius: .375rem; cursor: pointer; border: 1px solid rgb(255 255 255 / .07); background: transparent; color: rgb(255 255 255 / .45); font-size: .62rem; font-weight: 600; font-family: inherit; transition: .16s; }
.refcp-skills-create .refcp-skill-create-mini-btn:hover:not(:disabled) { border-color: rgb(6 182 212 / .4); color: rgb(6 182 212 / .95); background: rgb(6 182 212 / .06); }
.refcp-skills-create .refcp-skill-create-polish { color: rgb(103 232 249 / .95); border-color: rgb(6 182 212 / .32); background: rgb(6 182 212 / .1); }
.refcp-skills-create .refcp-skill-create-polish:hover:not(:disabled) { border-color: rgb(6 182 212 / .5); background: rgb(6 182 212 / .16); }
.refcp-skills-create .refcp-skill-create-content-box { position: relative; border-radius: .5rem; }
.refcp-skills-create .refcp-skill-create-content-box textarea { display: block; line-height: 1.6; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / .12) transparent; }
.refcp-skills-create .refcp-skill-create-content-box textarea::-webkit-scrollbar { width: 6px; }
.refcp-skills-create .refcp-skill-create-content-box textarea::-webkit-scrollbar-track { background: transparent; }
.refcp-skills-create .refcp-skill-create-content-box textarea::-webkit-scrollbar-thumb { background: rgb(255 255 255 / .12); border-radius: 6px; }
.refcp-skills-create .refcp-skill-create-content-box textarea::-webkit-scrollbar-thumb:hover { background: rgb(6 182 212 / .45); }
.refcp-skills-create .refcp-skill-create-content-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.refcp-skills-create .refcp-skill-create-content-count { font-size: .65rem; color: rgb(255 255 255 / .35); font-variant-numeric: tabular-nums; white-space: nowrap; }
.refcp-skills-create .refcp-skill-create-content-count.is-full { color: rgb(253 186 116); font-weight: 600; }
.refcp-skills-create .refcp-skill-create-mode-row { display: flex; gap: .5rem; }
.refcp-skills-create .refcp-skill-create-mode-btn { flex: 1 1 0%; position: relative; text-align: left; cursor: pointer; display: flex; flex-direction: column; align-items: normal; justify-content: normal; gap: .18rem; padding: .6rem .7rem .58rem; border-radius: .625rem; border: 1px solid rgb(255 255 255 / .06); background: rgb(255 255 255 / .01); transition: .18s; }
.refcp-skills-create .refcp-skill-create-mode-btn:hover { border-color: rgb(255 255 255 / .12); }
.refcp-skills-create .refcp-skill-create-mode-btn.active { border-color: rgb(6 182 212 / .45); background: rgb(6 182 212 / .05); }
.refcp-skills-create .refcp-skill-create-mode-icon { position: absolute; top: .58rem; right: .62rem; width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgb(6 182 212 / .12); border: 1px solid rgb(6 182 212 / .35); color: rgb(6 182 212 / .95); opacity: .35; transition: opacity .18s; }
.refcp-skills-create .refcp-skill-create-mode-icon.is-resident { background: rgb(249 115 22 / .12); border-color: rgb(249 115 22 / .4); color: rgb(253 186 116); }
.refcp-skills-create .refcp-skill-create-mode-btn.active .refcp-skill-create-mode-icon { opacity: 1; }
.refcp-skills-create .refcp-skill-create-mode-btn strong { font-size: .75rem; font-weight: 600; color: rgb(255 255 255 / .85); padding-right: 1.4rem; }
.refcp-skills-create .refcp-skill-create-mode-btn em { font-size: .64rem; color: rgb(255 255 255 / .38); font-style: normal; line-height: 1.5; }
.refcp-skills-create .refcp-skill-create-cats { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .85rem; }
.refcp-skills-create .refcp-skill-create-cat { display: block; padding: .24rem .58rem; border-radius: .625rem; cursor: pointer; border: 1px solid rgb(255 255 255 / .06); background: rgb(255 255 255 / .01); color: rgb(255 255 255 / .45); font-size: .6875rem; font-weight: 600; transition: .16s; }
.refcp-skills-create .refcp-skill-create-cat:hover { border-color: rgb(255 255 255 / .12); color: rgb(255 255 255 / .75); }
.refcp-skills-create .refcp-skill-create-cat.active { background: rgb(6 182 212 / .12); border-color: rgb(6 182 212 / .4); color: rgb(6 182 212 / .95); }
.refcp-skills-create .refcp-skill-create-cat-fee { color: rgb(253 186 116); margin-left: 3px; font-weight: 700; }
.refcp-skills-create .refcp-skill-create-footer { display: flex; flex: 0 0 auto; gap: .5rem; padding-top: .75rem; }
.refcp-skills-create .refcp-skill-create-cancel, .refcp-skills-create .refcp-skill-create-save { height: 2.375rem; border-radius: .625rem; border: 0; cursor: pointer; font-size: .8125rem; font-weight: 600; font-family: inherit; display: flex; align-items: center; justify-content: center; }
.refcp-skills-create .refcp-skill-create-cancel { flex: 0 0 30%; background: rgb(255 255 255 / .05); color: rgb(255 255 255 / .55); }
.refcp-skills-create .refcp-skill-create-cancel:hover { background: rgb(255 255 255 / .09); color: white; }
.refcp-skills-create .refcp-skill-create-save { flex: 1 1 0%; color: rgb(255 255 255 / .95); letter-spacing: .04em; background: linear-gradient(135deg, rgb(6 182 212 / .75), rgb(139 92 246 / .6)); transition: .25s; }
.refcp-skills-create .refcp-skill-create-save:hover:not(:disabled) { background: linear-gradient(135deg, rgb(6 182 212 / .9), rgb(139 92 246 / .75)); box-shadow: 0 .375rem 1.25rem rgb(6 182 212 / .2); transform: translateY(-1px); }
.refcp-skills-create .refcp-skill-create-save:disabled { opacity: .6; cursor: not-allowed; }
@media (max-width: 680px) {
  .modal.refcp.refcp-skills-create { padding: .9rem .85rem .85rem; max-height: 93vh; border-radius: 16px; }
  .refcp-skills-create .refcp-skill-create-mode-row { flex-direction: column; }
  .refcp-skills-create .refcp-skill-create-form-row { flex-direction: column; align-items: stretch; }
  .refcp-skills-create .refcp-skill-create-avatar-upload { flex-direction: row; width: auto; align-items: center; gap: .6rem; }
}

/* v111 observed skill gallery; isolated from the reviewed v109 creation form.
 * Source: v111 desktop DOM plus the accessible jngc gallery CSSOM in v109.
 * The max-height is a cap: filtering must leave the panel's height natural. */
.modal.refcp.refcp-skills-gallery { height: auto; max-width: none; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "HarmonyOS Sans", "Microsoft YaHei", sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5; color: black; }
.modal.refcp.refcp-skills-gallery button, .modal.refcp.refcp-skills-gallery input { font-family: Arial; line-height: normal; }
.modal.refcp.refcp-skills-gallery .jngc-segment { display: flex; gap: 2px; padding: 2px; border-radius: 0.5rem; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); }
.modal.refcp.refcp-skills-gallery .jngc-segment-btn { padding: 0.32rem 0.7rem; border-radius: 0.375rem; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; cursor: pointer; background: transparent; color: rgba(255, 255, 255, 0.45); font-size: 0.72rem; font-weight: 600; transition: 0.18s; }
.modal.refcp.refcp-skills-gallery .jngc-segment-btn:hover { color: rgba(255, 255, 255, 0.75); }
.modal.refcp.refcp-skills-gallery .jngc-segment-btn.active { background: rgba(6, 182, 212, 0.14); color: rgba(6, 182, 212, 0.95); }
.modal.refcp.refcp-skills-gallery .jngc-cats { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.85rem; }
.modal.refcp.refcp-skills-gallery .jngc-cat { padding: 0.24rem 0.58rem; border-radius: 0.625rem; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.01); color: rgba(255, 255, 255, 0.45); font-size: 0.6875rem; font-weight: 600; transition: 0.16s; }
.modal.refcp.refcp-skills-gallery .jngc-cat:hover { border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.75); }
.modal.refcp.refcp-skills-gallery .jngc-cat.active { background: rgba(6, 182, 212, 0.12); border-color: rgba(6, 182, 212, 0.4); color: rgba(6, 182, 212, 0.95); }
.modal.refcp.refcp-skills-gallery .jngc-loading, .modal.refcp.refcp-skills-gallery .jngc-empty { display: flex; flex-direction: column; gap: 0.6rem; align-items: center; justify-content: center; min-height: 230px; color: rgba(255, 255, 255, 0.3); font-size: 0.8rem; }
.modal.refcp.refcp-skills-gallery .jngc-load-more { text-align: center; padding: 0.55rem 0px 0.75rem; font-size: 0.66rem; color: rgba(255, 255, 255, 0.26); }
.modal.refcp.refcp-skills-gallery .jngc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 0.85rem 0.5rem; padding-top: 2px; padding-bottom: 0.5rem; }
.modal.refcp.refcp-skills-gallery .jngc-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 0.45rem; padding: 0.7rem 0.75rem 0.55rem; border-radius: 0.75rem; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.01); transition: border-color 0.2s, background 0.2s; }
.modal.refcp.refcp-skills-gallery .jngc-card:hover { z-index: 2; border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.024); }
.modal.refcp.refcp-skills-gallery .jngc-card.checked { border-color: rgba(6, 182, 212, 0.45); background: rgba(6, 182, 212, 0.05); }
.modal.refcp.refcp-skills-gallery .jngc-card.checked:hover { border-color: rgba(6, 182, 212, 0.6); }
.modal.refcp.refcp-skills-gallery .jngc-card.resident { border-color: rgba(249, 115, 22, 0.4); background: rgba(249, 115, 22, 0.043); }
.modal.refcp.refcp-skills-gallery .jngc-card.resident:hover { border-color: rgba(249, 115, 22, 0.55); }
.modal.refcp.refcp-skills-gallery .jngc-card-top { display: flex; align-items: flex-start; gap: 0.55rem; }
.modal.refcp.refcp-skills-gallery .jngc-card-avatar { width: 38px; height: 38px; border-radius: 0.5625rem; flex: 0 0 auto; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(6, 182, 212, 0.16), rgba(139, 92, 246, 0.12)); border: 1px solid rgba(255, 255, 255, 0.06); }
.modal.refcp.refcp-skills-gallery .jngc-card-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.modal.refcp.refcp-skills-gallery .jngc-card-letter { font-size: 0.9rem; font-weight: 600; color: rgba(6, 182, 212, 0.92); }
.modal.refcp.refcp-skills-gallery .jngc-card-head { flex: 1 1 0%; min-width: 0px; }
.modal.refcp.refcp-skills-gallery .jngc-card-name { font-size: 0.8rem; font-weight: 600; color: rgba(255, 255, 255, 0.88); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal.refcp.refcp-skills-gallery .jngc-card-tags { display: flex; gap: 0.24rem; margin-top: 0.26rem; flex-wrap: wrap; }
.modal.refcp.refcp-skills-gallery .jngc-tag { display: inline-flex; align-items: center; gap: 2px; padding: 0.0625rem 0.375rem; border-radius: 0.625rem; font-size: 0.6rem; line-height: 1.5; font-weight: 600; white-space: nowrap; }
.modal.refcp.refcp-skills-gallery .jngc-mark { width: 19px; height: 19px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; transition: 0.18s; }
.modal.refcp.refcp-skills-gallery .jngc-mark.is-check { background: rgba(6, 182, 212, 0.16); border: 1px solid rgba(6, 182, 212, 0.5); color: rgba(6, 182, 212, 0.95); }
.modal.refcp.refcp-skills-gallery .jngc-mark.is-resident { background: rgba(249, 115, 22, 0.14); border: 1px solid rgba(249, 115, 22, 0.5); color: rgb(253, 186, 116); }
.modal.refcp.refcp-skills-gallery .jngc-mark.is-empty { border: 1.5px solid rgba(255, 255, 255, 0.12); }
.modal.refcp.refcp-skills-gallery .jngc-card:hover .jngc-mark.is-empty { border-color: rgba(6, 182, 212, 0.45); }
.modal.refcp.refcp-skills-gallery .jngc-card-desc { margin: 0px; font-size: 0.6875rem; color: rgba(255, 255, 255, 0.42); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.1em; }
.modal.refcp.refcp-skills-gallery .jngc-card-author { display: flex; align-items: center; gap: 0.32rem; min-width: 0px; font-size: 0.62rem; color: rgba(255, 255, 255, 0.36); }
.modal.refcp.refcp-skills-gallery .jngc-card-author img, .modal.refcp.refcp-skills-gallery .jngc-card-author .jngc-author-letter { width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: rgba(139, 92, 246, 0.2); color: rgba(196, 181, 253, 0.95); font-size: 0.55rem; font-weight: 700; }
.modal.refcp.refcp-skills-gallery .jngc-card-author span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal.refcp.refcp-skills-gallery .jngc-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.3rem; cursor: default; padding-top: 0.4rem; border-top: 1px solid rgba(255, 255, 255, 0.04); }
.modal.refcp.refcp-skills-gallery .jngc-card-use { font-size: 0.6rem; color: rgba(255, 255, 255, 0.26); white-space: nowrap; }
.modal.refcp.refcp-skills-gallery .jngc-card-actions { display: flex; gap: 0.26rem; flex-wrap: wrap; justify-content: flex-end; }
.modal.refcp.refcp-skills-gallery .jngc-mini-btn { display: inline-flex; align-items: center; gap: 3px; padding: 0.2rem 0.44rem; border-radius: 0.375rem; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.07); background: transparent; color: rgba(255, 255, 255, 0.45); font-size: 0.62rem; font-weight: 600; transition: 0.16s; font-family: inherit; }
.modal.refcp.refcp-skills-gallery .jngc-mini-btn.icon-only { padding: 0.2rem 0.32rem; }
.modal.refcp.refcp-skills-gallery .jngc-mini-btn:hover:not(:disabled) { border-color: rgba(6, 182, 212, 0.4); color: rgba(6, 182, 212, 0.95); background: rgba(6, 182, 212, 0.06); }
.modal.refcp.refcp-skills-gallery .jngc-mini-btn.on { border-color: rgba(249, 115, 22, 0.4); color: rgb(253, 186, 116); background: rgba(249, 115, 22, 0.08); }
.modal.refcp.refcp-skills-gallery .jngc-mini-btn.danger:hover:not(:disabled) { border-color: rgba(239, 68, 68, 0.45); color: rgba(248, 113, 113, 0.95); background: rgba(239, 68, 68, 0.07); }
.modal.refcp.refcp-skills-gallery .jngc-mini-btn.accent { border-color: rgba(139, 92, 246, 0.35); color: rgba(196, 181, 253, 0.95); }
.modal.refcp.refcp-skills-gallery .jngc-mini-btn.accent:hover:not(:disabled) { border-color: rgba(139, 92, 246, 0.55); background: rgba(139, 92, 246, 0.1); color: rgb(216, 205, 254); }
.modal.refcp.refcp-skills-gallery .jngc-mini-btn:disabled { opacity: 0.5; cursor: default; }
.modal.refcp.refcp-skills-gallery { position: relative; overflow: hidden; width: min(940px, 96vw); max-height: min(88vh, 820px); display: flex; flex-direction: column; padding: 1.1rem 1.2rem 1rem; border-radius: 1rem; background: rgb(18, 18, 24); border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: rgba(0, 0, 0, 0.6) 0px 2rem 5rem, rgba(6, 182, 212, 0.08) 0px 0px 0px 1px; }
.modal.refcp.refcp-skills-gallery .jngc-close { position: absolute; top: 0.85rem; right: 0.9rem; z-index: 2; width: 27px; height: 27px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.05); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; color: rgba(255, 255, 255, 0.5); cursor: pointer; transition: 0.18s; }
.modal.refcp.refcp-skills-gallery .jngc-close:hover { background: rgba(255, 255, 255, 0.1); color: rgb(255, 255, 255); }
.modal.refcp.refcp-skills-gallery .jngc-header { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.05rem; padding-right: 2.4rem; }
.modal.refcp.refcp-skills-gallery .jngc-header-icon { width: 2.25rem; height: 2.25rem; border-radius: 0.5625rem; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(6, 182, 212, 0.16), rgba(139, 92, 246, 0.12)); color: rgba(6, 182, 212, 0.92); }
.modal.refcp.refcp-skills-gallery .jngc-title-group { min-width: 0px; }
.modal.refcp.refcp-skills-gallery .jngc-title-group h3 { margin: 0px 0px 0.125rem; font-size: 0.9375rem; font-weight: 600; color: rgba(255, 255, 255, 0.95); }
.modal.refcp.refcp-skills-gallery .jngc-title-group p { margin: 0px; font-size: 0.6875rem; color: rgba(255, 255, 255, 0.38); }
.modal.refcp.refcp-skills-gallery .jngc-create-btn { margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: 0.32rem; padding: 0.42rem 0.75rem; border-radius: 0.5rem; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; cursor: pointer; background: linear-gradient(135deg, rgba(6, 182, 212, 0.75), rgba(139, 92, 246, 0.6)); color: rgba(255, 255, 255, 0.95); font-size: 0.75rem; font-weight: 600; transition: 0.25s; }
.modal.refcp.refcp-skills-gallery .jngc-create-btn:hover { background: linear-gradient(135deg, rgba(6, 182, 212, 0.9), rgba(139, 92, 246, 0.75)); box-shadow: rgba(6, 182, 212, 0.2) 0px 0.375rem 1.25rem; transform: translateY(-1px); }
.modal.refcp.refcp-skills-gallery .jngc-explain { display: flex; align-items: stretch; gap: 0.75rem; padding: 0.7rem 0.8rem; margin-bottom: 0.8rem; border-radius: 0.75rem; background: rgba(255, 255, 255, 0.016); border: 1px solid rgba(255, 255, 255, 0.05); }
.modal.refcp.refcp-skills-gallery .jngc-explain-item { flex: 1 1 0%; display: flex; align-items: flex-start; gap: 0.45rem; min-width: 0px; }
.modal.refcp.refcp-skills-gallery .jngc-explain-divider { width: 1px; background: rgba(255, 255, 255, 0.06); }
.modal.refcp.refcp-skills-gallery .jngc-explain-badge { width: 17px; height: 17px; border-radius: 50%; flex: 0 0 auto; margin-top: 1px; display: flex; align-items: center; justify-content: center; }
.modal.refcp.refcp-skills-gallery .jngc-explain-badge.is-resident { background: rgba(249, 115, 22, 0.14); border: 1px solid rgba(249, 115, 22, 0.35); color: rgb(253, 186, 116); }
.modal.refcp.refcp-skills-gallery .jngc-explain-badge.is-check { background: rgba(6, 182, 212, 0.12); border: 1px solid rgba(6, 182, 212, 0.35); color: rgba(6, 182, 212, 0.95); }
.modal.refcp.refcp-skills-gallery .jngc-explain-item strong { display: block; font-size: 0.73rem; font-weight: 600; color: rgba(255, 255, 255, 0.72); }
.modal.refcp.refcp-skills-gallery .jngc-explain-item em { display: block; font-style: normal; font-size: 0.655rem; line-height: 1.5; color: rgba(255, 255, 255, 0.38); margin-top: 1px; }
.modal.refcp.refcp-skills-gallery .jngc-status { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.8rem; padding: 0px 0.15rem; flex-wrap: wrap; }
.modal.refcp.refcp-skills-gallery .jngc-status-left { display: flex; align-items: center; gap: 0.4rem; min-width: 0px; }
.modal.refcp.refcp-skills-gallery .jngc-status-chip { display: inline-flex; align-items: center; gap: 0.28rem; padding: 0.125rem 0.28rem 0.125rem 0.45rem; border-radius: 0.625rem; font-size: 0.68rem; font-weight: 600; background: rgba(249, 115, 22, 0.12); border: 1px solid rgba(249, 115, 22, 0.35); color: rgb(253, 186, 116); }
.modal.refcp.refcp-skills-gallery .jngc-chip-x { width: 14px; height: 14px; border-radius: 50%; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; cursor: pointer; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); color: inherit; transition: background 0.15s; }
.modal.refcp.refcp-skills-gallery .jngc-chip-x:hover { background: rgba(239, 68, 68, 0.55); color: rgb(255, 255, 255); }
.modal.refcp.refcp-skills-gallery .jngc-status-empty { font-size: 0.6875rem; color: rgba(255, 255, 255, 0.3); }
.modal.refcp.refcp-skills-gallery .jngc-status-right { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.modal.refcp.refcp-skills-gallery .jngc-status-count { font-size: 0.6875rem; color: rgba(255, 255, 255, 0.45); }
.modal.refcp.refcp-skills-gallery .jngc-status-count.is-full { color: rgba(248, 113, 113, 0.9); }
.modal.refcp.refcp-skills-gallery .jngc-status-auto { font-size: 0.625rem; font-weight: 600; color: rgba(74, 222, 128, 0.95); padding: 0.0625rem 0.375rem; border-radius: 0.625rem; background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.25); }
.modal.refcp.refcp-skills-gallery .jngc-toolbar { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.7rem; flex-wrap: wrap; }
.modal.refcp.refcp-skills-gallery .jngc-search { flex: 1 1 0%; min-width: 190px; display: flex; align-items: center; gap: 0.42rem; padding: 0.44rem 0.65rem; border-radius: 0.5rem; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.35); transition: border-color 0.2s; }
.modal.refcp.refcp-skills-gallery .jngc-search:focus-within { border-color: rgba(6, 182, 212, 0.4); }
.modal.refcp.refcp-skills-gallery .jngc-search input { flex: 1 1 0%; min-width: 0px; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; outline: none; color: rgba(255, 255, 255, 0.9); font-size: 0.76rem; }
.modal.refcp.refcp-skills-gallery .jngc-search input::placeholder { color: rgba(255, 255, 255, 0.25); }
.modal.refcp.refcp-skills-gallery .jngc-search-clear { width: 16px; height: 16px; border-radius: 50%; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; cursor: pointer; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.55); }
.modal.refcp.refcp-skills-gallery .jngc-search-clear:hover { background: rgba(255, 255, 255, 0.16); color: rgb(255, 255, 255); }
.modal.refcp.refcp-skills-gallery .jngc-body { flex: 1 1 0%; overflow-y: auto; min-height: min(210px, 32vh); padding-right: 5px; }
.modal.refcp.refcp-skills-gallery .jngc-body::-webkit-scrollbar { width: 6px; }
.modal.refcp.refcp-skills-gallery .jngc-body::-webkit-scrollbar-track { background: transparent; }
.modal.refcp.refcp-skills-gallery .jngc-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 6px; }
.modal.refcp.refcp-skills-gallery .jngc-body::-webkit-scrollbar-thumb:hover { background: rgba(6, 182, 212, 0.45); }
.modal.refcp.refcp-skills-gallery .jngc-body { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.12) transparent; }
/* Reset direct legacy declarations which the new observed class structure
 * otherwise inherits; these do not change the creation surface. */
.modal.refcp.refcp-skills-gallery .jngc-close { padding: 0; }
.modal.refcp.refcp-skills-gallery .jngc-create-btn { justify-content: normal; line-height: normal; }
.modal.refcp.refcp-skills-gallery .jngc-search input { width: auto; height: auto; padding: 0; border-radius: 0; }
.modal.refcp.refcp-skills-gallery .jngc-segment-btn, .modal.refcp.refcp-skills-gallery .jngc-cat { line-height: normal; }
.modal.refcp.refcp-skills-gallery .jngc-grid { align-content: normal; }
.modal.refcp.refcp-skills-gallery .jngc-card { height: auto; min-width: auto; }
.modal.refcp.refcp-skills-gallery .jngc-card-desc { flex: initial; min-height: 2.1em; max-height: none; margin: 0; font-size: .6875rem; line-height: 1.5; color: rgb(255 255 255 / .42); overflow-wrap: normal; }
.modal.refcp.refcp-skills-gallery .jngc-mini-btn { justify-content: normal; font-family: inherit; line-height: normal; }
.modal.refcp.refcp-skills-gallery .jngc-mini-btn:disabled { opacity: .5; cursor: default; }
.modal.refcp.refcp-skills-gallery .jngc-chip-x { padding: 0; }
.modal.refcp.refcp-skills-gallery .jngc-tag.tag-official { color: rgb(6 182 212 / .92); background: rgb(6 182 212 / .1); border: 1px solid rgb(6 182 212 / .3); }
.modal.refcp.refcp-skills-gallery .jngc-tag.tag-cat { color: rgb(255 255 255 / .42); background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .07); }
.modal.refcp.refcp-skills-gallery .jngc-tag.tag-tool { color: #fdba74; background: rgb(249 115 22 / .1); border: 1px solid rgb(249 115 22 / .3); }
.modal.refcp.refcp-skills-gallery .jngc-status-count [data-refcp-selected-count] { font: inherit; color: inherit; }
.modal.refcp.refcp-skills-gallery .jngc-empty { grid-column: 1 / -1; min-height: 230px; color: rgb(255 255 255 / .3); font-size: .8rem; }
.modal.refcp.refcp-skills-gallery .jngc-empty p { margin: 0; font: inherit; color: inherit; }

/* Native default button font and direct paragraph line-height, preserved
 * despite the app shared .modal p/button declarations. */
.modal.refcp.refcp-skills-gallery .jngc-close, .modal.refcp.refcp-skills-gallery .jngc-chip-x { font-family: Arial; font-size: 13.3333px; font-weight: 400; line-height: normal; }
.modal.refcp.refcp-skills-gallery .jngc-title-group p { line-height: 1.5; }

/* Observed native controls: text tabs are block flex items; the icon-only
 * buttons keep their browser font and a normal gap. */
.modal.refcp.refcp-skills-gallery .jngc-segment-btn, .modal.refcp.refcp-skills-gallery .jngc-cat { display: block; align-items: normal; justify-content: normal; gap: normal; }
.modal.refcp.refcp-skills-gallery .jngc-close, .modal.refcp.refcp-skills-gallery .jngc-chip-x, .modal.refcp.refcp-skills-gallery .jngc-search-clear { gap: normal; }
.modal.refcp.refcp-skills-gallery .jngc-search-clear { padding: 0; font-family: Arial; font-size: 13.3333px; font-weight: 400; line-height: normal; }

/* The local shared modal is already a fixed, centered host. The reference
 * constrains its relative panel with an overlay's 1.5rem inset instead. */
.modal.refcp.refcp-skills-gallery { position: fixed; width: min(940px, 96vw, calc(100vw - 3rem)); }
body:has(.refcp-skills-gallery:not([hidden])) #modal-backdrop { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.modal.refcp.refcp-skills-gallery .jngc-header,
.modal.refcp.refcp-skills-gallery .jngc-explain,
.modal.refcp.refcp-skills-gallery .jngc-status,
.modal.refcp.refcp-skills-gallery .jngc-toolbar { flex-shrink: 0; }
.modal.refcp.refcp-skills-gallery .jngc-body { padding: 0 5px 0 0; }

/* Actual 390x844 gallery plus the observed component's 680px media rules.
 * Creation's separate phone rules remain unchanged. */
@media (max-width: 680px) {
  .modal.refcp.refcp-skills-gallery { padding: .9rem .85rem .85rem; max-height: 93vh; border-radius: 16px; }
  .modal.refcp.refcp-skills-gallery .jngc-grid { grid-template-columns: 1fr; }
  .modal.refcp.refcp-skills-gallery .jngc-toolbar { flex-direction: column; align-items: stretch; }
  .modal.refcp.refcp-skills-gallery .jngc-explain { flex-direction: column; gap: .5rem; }
  .modal.refcp.refcp-skills-gallery .jngc-explain-divider { display: none; }
}

/* v111 actual common chat skill entry: the resident avatar and checked badge
 * are independent. No other composer tool or media entry is restyled here. */
body:not(.media-mode) #skills.jsby-btn { --skill-entry-bg: rgb(41 43 51); --skill-entry-raised: rgb(49 52 60); display: flex; align-items: center; justify-content: center; gap: .375rem; height: 1.875rem; min-height: 0; margin: 0; padding: 0 .625rem; border: 1px solid transparent; border-radius: .375rem; background: linear-gradient(var(--skill-entry-bg),var(--skill-entry-bg)) padding-box,linear-gradient(135deg,#6366f199,#a855f780) border-box; color: rgb(245 251 255); font-family: Arial; font-size: 13.3333px; font-weight: 400; line-height: normal; white-space: nowrap; transition: all .3s cubic-bezier(.4,0,.2,1); }
body:not(.media-mode) #skills.jsby-btn:hover { background: linear-gradient(var(--skill-entry-raised),var(--skill-entry-raised)) padding-box,linear-gradient(135deg,#6366f1e6,#a855f7cc) border-box; box-shadow: 0 0 .75rem #6366f129; }
body:not(.media-mode) #skills.jsby-btn.is-active { background: linear-gradient(var(--skill-entry-raised),var(--skill-entry-raised)) padding-box,linear-gradient(135deg,#6366f1f2,#a855f7e6) border-box; box-shadow: 0 0 .75rem #6366f13d; }
body:not(.media-mode) #skills.jsby-btn:active { transform: scale(.98); }
html[data-display-theme="light"] body:not(.media-mode) #skills.jsby-btn { --skill-entry-bg: rgb(255 255 255); --skill-entry-raised: rgb(250 251 252); color: rgb(15 20 25); background: linear-gradient(var(--skill-entry-bg),var(--skill-entry-bg)) padding-box,linear-gradient(135deg,#6366f16b,#a855f761) border-box; }
html[data-display-theme="light"] body:not(.media-mode) #skills.jsby-btn:hover { background: linear-gradient(var(--skill-entry-raised),var(--skill-entry-raised)) padding-box,linear-gradient(135deg,#6366f1b8,#a855f7a8) border-box; box-shadow: 0 0 .75rem #6366f124; }
html[data-display-theme="light"] body:not(.media-mode) #skills.jsby-btn.is-active { background: linear-gradient(var(--skill-entry-raised),var(--skill-entry-raised)) padding-box,linear-gradient(135deg,#6366f1cc,#a855f7bf) border-box; box-shadow: 0 0 .75rem #6366f12e; }
body:not(.media-mode) #skills.jsby-btn .jsby-btn-text { display: block; max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: inherit; font-size: .75rem; font-weight: 400; line-height: normal; }
body:not(.media-mode) #skills.jsby-btn .jsby-btn-icon { display: block; width: 13px; height: 13px; flex: 0 0 auto; color: rgb(99 102 241 / .85); }
body:not(.media-mode) #skills.jsby-btn .jsby-btn-count { display: flex; align-items: center; justify-content: center; min-width: 1rem; height: 1rem; padding: 0 .25rem; border-radius: 999px; background: linear-gradient(135deg,#06b6d4bf,#8b5cf699); color: rgb(255 255 255 / .95); font-family: inherit; font-size: .62rem; font-weight: 400; line-height: .62rem; }
body:not(.media-mode) #skills.jsby-btn .jsby-btn-avatar { display: flex; align-items: center; justify-content: center; width: 1.125rem; height: 1.125rem; flex: 0 0 auto; overflow: hidden; border-radius: 50%; color: white; font-family: inherit; font-size: .6rem; font-weight: 600; line-height: normal; }
body:not(.media-mode) #skills.jsby-btn .jsby-btn-avatar img { display: block; width: 100%; height: 100%; }

/* Observed v111 default computed transitions: close/create/search retain
 * their component transitions; the remaining gallery nodes share the site rule.
 * Creation and other panels are intentionally outside this exact scope. */
.modal.refcp.refcp-skills-gallery,
.modal.refcp.refcp-skills-gallery :not(.jngc-close):not(.jngc-create-btn):not(.jngc-search) {
  transition: background-color .25s, color .2s, border-color .25s, box-shadow .25s !important;
}
.modal.refcp.refcp-skills-gallery .jngc-tag.tag-resident {
  color: #fdba74;
  background: rgb(249 115 22 / .12);
  border: 1px solid rgb(249 115 22 / .35);
}

/* Only rendered when a retained legacy example is already selected.
 * This local service notice is not reference catalogue content. */
.modal.refcp.refcp-skills-gallery .jngc-legacy-status {
  flex: 0 0 auto;
  margin: .5rem 0;
  font-size: .6875rem;
  line-height: 1.5;
  color: rgb(255 255 255 / .55);
}

/* v111 source-specific surfaces reuse the observed gallery/card controls.
 * No community records, authors, installations or private content are seeded. */
.modal.refcp.refcp-skills-gallery .jnsq-bar { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-bottom: .7rem; }
.modal.refcp.refcp-skills-gallery .jnsq-hint { margin-left: auto; font-size: .66rem; line-height: 1.5; color: rgb(255 255 255 / .32); }
.modal.refcp.refcp-skills-gallery .jnsq-bar button:disabled { opacity: .5; cursor: not-allowed; }
.modal.refcp.refcp-skills-gallery .jngc-source-status,
.modal.refcp-skill-source-overlay .jngc-source-status { margin: .5rem 0; font-size: .6875rem; font-weight: 400; line-height: 1.5; color: rgb(255 255 255 / .55); }

/* Source dialogs are body portals, outside the gallery's transformed panel.
 * The 612px long-preview measurement is deliberately not a fixed height. */
.modal.refcp-skill-source-overlay { position: fixed; inset: 0; top: 0; left: 0; transform: none; z-index: 3100; width: 100%; max-width: none; height: 100%; max-height: none; min-height: 0; margin: 0; padding: 1.5rem; border: 0; border-radius: 0; display: flex; align-items: center; justify-content: center; gap: normal; overflow: auto; background: rgb(0 0 0 / .72); box-shadow: none; color: rgb(0 0 0); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "HarmonyOS Sans", "Microsoft YaHei", sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5; box-sizing: border-box; }
.modal.refcp-skill-source-overlay[hidden] { display: none !important; }
.modal.refcp-skill-source-overlay * { box-sizing: border-box; transition: background-color .25s, color .2s, border-color .25s, box-shadow .25s; }
.modal.refcp-skill-source-overlay svg { display: block; flex-shrink: 1; }
.modal.refcp-skill-source-overlay .jngc-confirm-panel { width: min(410px, 92vw); text-align: center; padding: 1.25rem 1.2rem 1rem; border-radius: 1rem; background: rgb(18 18 24); border: 1px solid rgb(255 255 255 / .06); box-shadow: rgb(0 0 0 / .6) 0 2rem 5rem, rgb(6 182 212 / .08) 0 0 0 1px; }
.modal.refcp-skill-source-overlay .jngc-confirm-panel.wide { width: min(520px, 94vw); text-align: left; }
.modal.refcp-skill-source-overlay .jngc-confirm-icon { width: 2.5rem; height: 2.5rem; border-radius: .625rem; margin: 0 auto .65rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgb(6 182 212 / .16), rgb(139 92 246 / .12)); color: rgb(6 182 212 / .92); }
.modal.refcp-skill-source-overlay .jngc-confirm-icon.danger { background: rgb(239 68 68 / .12); color: rgb(248 113 113 / .92); }
.modal.refcp-skill-source-overlay .jngc-confirm-title { margin: 0 0 .45rem; padding: 0; font-size: .875rem; font-weight: 600; line-height: 1.5; color: rgb(255 255 255 / .93); }
.modal.refcp-skill-source-overlay .jngc-confirm-text { margin: 0 0 .65rem; padding: 0; font-size: .72rem; font-weight: 400; color: rgb(255 255 255 / .45); line-height: 1.6; }
.modal.refcp-skill-source-overlay .jnjb-center { text-align: center; }
.modal.refcp-skill-source-overlay .jngc-dialog-field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .7rem; text-align: left; }
.modal.refcp-skill-source-overlay .jngc-cats { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; }
.modal.refcp-skill-source-overlay .jngc-cat { display: block; padding: .24rem .58rem; border-radius: .625rem; border: 1px solid rgb(255 255 255 / .06); background: rgb(255 255 255 / .01); color: rgb(255 255 255 / .45); font-family: Arial; font-size: .6875rem; font-weight: 600; line-height: normal; cursor: pointer; }
.modal.refcp-skill-source-overlay .jngc-cat:hover { border-color: rgb(255 255 255 / .12); color: rgb(255 255 255 / .75); }
.modal.refcp-skill-source-overlay .jngc-cat.active { background: rgb(6 182 212 / .12); border-color: rgb(6 182 212 / .4); color: rgb(6 182 212 / .95); }
.modal.refcp-skill-source-overlay .jngc-dialog-field textarea { width: 100%; resize: vertical; min-height: 64px; background: rgb(255 255 255 / .02); border: 1px solid rgb(255 255 255 / .07); border-radius: .5rem; padding: .5rem .65rem; color: rgb(255 255 255 / .92); font-size: .74rem; line-height: 1.55; outline: none; font-family: inherit; transition: border-color .2s; }
.modal.refcp-skill-source-overlay .jngc-dialog-field textarea:focus { border-color: rgb(6 182 212 / .45); }
.modal.refcp-skill-source-overlay .jngc-dialog-field textarea::placeholder { color: rgb(255 255 255 / .25); }
.modal.refcp-skill-source-overlay .jngc-confirm-actions { display: flex; gap: .5rem; }
.modal.refcp-skill-source-overlay .jngc-confirm-cancel,
.modal.refcp-skill-source-overlay .jngc-confirm-ok { flex: 1 1 0%; height: 2.125rem; border-radius: .5rem; border: none; cursor: pointer; font-size: .75rem; font-weight: 600; font-family: inherit; display: flex; align-items: center; justify-content: center; line-height: normal; }
.modal.refcp-skill-source-overlay .jngc-confirm-cancel { background: rgb(255 255 255 / .05); color: rgb(255 255 255 / .55); }
.modal.refcp-skill-source-overlay .jngc-confirm-cancel:hover { background: rgb(255 255 255 / .09); color: white; }
.modal.refcp-skill-source-overlay .jngc-confirm-ok.danger { background: linear-gradient(135deg, rgb(239 68 68 / .85), rgb(190 28 28 / .85)); color: rgb(255 255 255 / .95); }
.modal.refcp-skill-source-overlay .jngc-confirm-ok:disabled { opacity: .6; cursor: not-allowed; }
.modal.refcp-skill-source-overlay .jnzw-head { display: flex; gap: .6rem; margin-bottom: .75rem; }
.modal.refcp-skill-source-overlay .jnzw-title { flex: 1 1 0%; min-width: 0; }
.modal.refcp-skill-source-overlay .jnzw-head .jngc-confirm-title { margin-bottom: .2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal.refcp-skill-source-overlay .jnzw-head .jngc-confirm-text { margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.modal.refcp-skill-source-overlay .jngc-card-avatar { width: 38px; height: 38px; border-radius: .5625rem; flex: 0 0 auto; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgb(6 182 212 / .16), rgb(139 92 246 / .12)); border: 1px solid rgb(255 255 255 / .06); }
.modal.refcp-skill-source-overlay .jngc-card-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.modal.refcp-skill-source-overlay .jngc-content-view { max-height: min(56vh, 460px); overflow-y: auto; text-align: left; padding: .7rem .8rem; border-radius: .625rem; margin-bottom: .75rem; background: rgb(255 255 255 / .016); border: 1px solid rgb(255 255 255 / .06); font-size: .74rem; line-height: 1.65; color: rgb(255 255 255 / .78); white-space: pre-wrap; word-break: break-word; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / .12) transparent; }
.modal.refcp-skill-source-overlay .jngc-content-view::-webkit-scrollbar { width: 6px; }
.modal.refcp-skill-source-overlay .jngc-content-view::-webkit-scrollbar-track { background: transparent; }
.modal.refcp-skill-source-overlay .jngc-content-view::-webkit-scrollbar-thumb { background: rgb(255 255 255 / .12); border-radius: 6px; }
.modal.refcp-skill-source-overlay .jngc-content-view::-webkit-scrollbar-thumb:hover { background: rgb(6 182 212 / .45); }
.refcp-token-field input[data-refcp-number="maxOutputTokens"] { width: 5rem; min-width: 0; color: rgb(255 255 255 / .9); background: transparent; border: 0; font-family: inherit; font-size: .75rem; font-weight: 600; line-height: 1.5; text-align: right; }
.refcp-token-field input[data-refcp-number="maxOutputTokens"]:focus-visible { outline: 1px solid var(--accent, #13cee1); outline-offset: 3px; border-radius: 3px; }