/* Shared wine, antique gold and serif language of Harem's existing popup layers. */
.harem-credit-button{flex:0 0 auto;min-height:44px;padding:8px 12px;border:1px solid #886747;border-radius:10px;background:linear-gradient(145deg,#38202b,#190d14);color:#f0d8a7;font-size:12px;font-weight:600;line-height:1.3;font-family:inherit;white-space:nowrap;cursor:pointer;font-variant-numeric:tabular-nums;box-shadow:inset 0 1px #ffffff12,0 3px 8px #0003}
.harem-credit-button.is-unavailable{color:#c9b9bd}
.harem-credit-dialog{--credit-gold:#e5c58c;width:min(480px,calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain;box-sizing:border-box;padding:24px;border:1px solid #896747;border-radius:22px;background:radial-gradient(ellipse at 100% 0,#52203455,transparent 52%),#160b12;color:#f0e6e9;box-shadow:inset 0 0 0 4px #24171a,0 24px 80px #000a;font-family:inherit;scrollbar-width:thin;scrollbar-color:#78505f #160b12;overflow-wrap:anywhere}
.harem-credit-dialog::backdrop{background:#080107cc}
.harem-credit-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #b48b502e}
.harem-credit-heading h2,.harem-attendance-dialog>h2,.harem-attendance-notice>h2{margin:0;font-family:var(--font-serif,"Gowun Batang",serif);font-size:22px;font-weight:700;line-height:1.45;color:#f1dfbd;letter-spacing:-.02em}
.harem-credit-close{flex:0 0 44px;width:44px;height:44px;border:1px solid #74513f;border-radius:12px;background:linear-gradient(#35202a,#21131b);color:#eed8bb;font-size:26px;line-height:1;font-family:inherit;cursor:pointer}
.harem-credit-summary{position:relative;margin:4px 0 20px;padding:23px 20px;text-align:center;border:1px solid #99744766;border-radius:14px;background:radial-gradient(ellipse at 50% 0,#bc8e3920,transparent 85%),linear-gradient(135deg,#33212b,#20121b);box-shadow:inset 0 1px #f7d3a312}
.harem-credit-summary::before,.harem-credit-summary::after{content:"";position:absolute;top:14px;width:5px;height:5px;border:1px solid #c6a06b;transform:rotate(45deg)}
.harem-credit-summary::before{left:16px}.harem-credit-summary::after{right:16px}
.harem-credit-caption{color:#d6bf9c;font-size:12px;letter-spacing:.1em}
.harem-credit-total{margin:8px 0 5px;color:#f4d69d;font-size:clamp(30px,7vw,38px);font-weight:650;line-height:1.25;font-variant-numeric:tabular-nums;letter-spacing:-.035em}
.harem-credit-muted{color:#bfaab5;font-size:12px;line-height:1.65;margin:9px 0}
.harem-credit-summary .harem-credit-muted{margin:6px 0 0;color:#d4bdc9}
.harem-credit-copy{font-size:13px;line-height:1.8;margin:10px 0;word-break:keep-all;overflow-wrap:anywhere}
.harem-credit-rules{padding:0 2px}
.harem-credit-copy--helpers{color:#c5b2bc;font-size:12px}
.harem-credit-copy--roomFree{color:#edd2a2;padding-top:10px;border-top:1px solid #b48b5026}
.harem-credit-progress{margin:18px 0 10px;padding:18px;border:1px solid #80556480;border-radius:14px;background:linear-gradient(135deg,#3c1d2c70,#261521);font-size:13px;line-height:1.7}
.harem-credit-progress>.harem-credit-copy:first-child{margin-top:0}
.harem-credit-progress strong{display:block;font-size:13px;color:#f0d4de;font-weight:600;font-variant-numeric:tabular-nums}
.harem-credit-progress p{margin:9px 0 0}
.harem-credit-conversion{word-break:keep-all;color:#dfb980;padding-bottom:15px;font-size:12px}
.harem-credit-meter{display:block;appearance:none;width:100%;height:6px;margin:12px 0;border:0;border-radius:8px;overflow:hidden;background:#10090f;color:#ce7897}
.harem-credit-meter::-webkit-progress-bar{background:#10090f;border-radius:8px}
.harem-credit-meter::-webkit-progress-value{background:linear-gradient(90deg,#8b3d5e,#e2a1b0);border-radius:8px}
.harem-credit-meter::-moz-progress-bar{background:linear-gradient(90deg,#8b3d5e,#e2a1b0);border-radius:8px}
.harem-credit-warning{padding:12px 14px;border:1px solid #a65a6880;border-radius:10px;background:#67213740;color:#ffc8d4;font-size:13px;line-height:1.7}
.harem-credit-login-copy{font-size:13px;color:#e3bdcc;line-height:1.7;margin:0}
.harem-credit-attendance,.harem-credit-account{margin-top:18px;padding-top:16px;border-top:1px solid #b48b502e}
.harem-credit-attendance .harem-credit-action{margin-top:0}
.harem-credit-action{display:flex;box-sizing:border-box;align-items:center;justify-content:center;min-height:46px;margin-top:12px;padding:11px 16px;border-radius:10px;border:1px solid #80594b;background:linear-gradient(180deg,#38202c,#26151f);color:#eed8bb;text-decoration:none;width:100%;font-size:13px;font-weight:600;line-height:1.5;font-family:inherit;cursor:pointer;text-align:center;overflow-wrap:anywhere;box-shadow:inset 0 1px #ffffff0a;touch-action:manipulation}
.harem-credit-action--primary{border-color:#b58063;background:linear-gradient(175deg,#71384b,#421c2d);color:#fff0d4;box-shadow:inset 0 1px #f9d1a92b,0 4px 12px #0003}
.harem-credit-action:disabled{opacity:.55;cursor:wait}
:is(.harem-credit-button,.harem-credit-action,.harem-credit-close,.harem-affinity-help):focus-visible{outline:2px solid #f0ce91;outline-offset:3px}
@media(hover:hover){:is(.harem-credit-button,.harem-credit-action,.harem-credit-close,.harem-affinity-help):hover:not(:disabled){border-color:#d4ad75;filter:brightness(1.12)}}
.harem-attendance-dialog>h2,.harem-attendance-notice>h2{padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid #b48b502e}
.harem-attendance-dialog .harem-credit-copy,.harem-attendance-notice .harem-credit-copy{font-size:14px;line-height:1.8}
.harem-credit-toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:16000;max-width:calc(100vw - 32px);box-sizing:border-box;border:1px solid #a17b51;background:#26151ff5;color:#f0d6a7;border-radius:12px;padding:12px 18px;font-size:13px;line-height:1.6;box-shadow:0 8px 28px #0006;pointer-events:none;text-align:center;overflow-wrap:anywhere}
.harem-credit-toast[hidden]{display:none}
.harem-evaluation-list{display:grid;gap:0;margin:18px 0;padding:10px 16px 16px;border:1px solid #88674780;border-radius:14px;background:radial-gradient(ellipse at 100% 0,#59233b33,transparent 65%),#1c1018}
.harem-evaluation-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid #b48b502e;color:#eed4a8;font-size:15px;font-family:var(--font-serif,serif)}
.harem-affinity-help{flex:0 0 44px;width:44px;height:44px;border:1px solid #88674780;border-radius:50%;background:#35202a;color:#ebd3ab;font-size:18px;font-weight:600;line-height:1;font-family:inherit;cursor:pointer;touch-action:manipulation}
.harem-evaluation-row{display:grid;grid-template-columns:minmax(62px,95px) minmax(40px,1fr) 36px;align-items:center;gap:12px;min-width:0;min-height:38px}
.harem-evaluation-name{font-size:12px;line-height:1.4;color:#e1cdd6;overflow-wrap:anywhere}
.harem-evaluation-bar{position:relative;height:6px;border-radius:6px;border:1px solid #86685e55;background:linear-gradient(90deg,#394c79,#55414f 50%,#ba4b72);margin:0 3px}
.harem-evaluation-bar::after{content:"";position:absolute;left:50%;top:-3px;height:10px;width:1px;background:#d8c1b980}
.harem-evaluation-marker{position:absolute;z-index:1;top:-4px;width:4px;height:12px;background:#f0d29a;border:1px solid #f7e3bb;border-radius:4px;transform:translateX(-50%);box-shadow:0 1px 4px #0009}
.harem-evaluation-score{text-align:right;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:#bfaeb8}
[data-tone=positive]>.harem-evaluation-score{color:#f5a4bc}[data-tone=negative]>.harem-evaluation-score{color:#afc4f4}
.harem-affinity-help-dialog{width:min(600px,calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)))}
.harem-affinity-help-dialog .harem-credit-heading{position:sticky;top:-24px;z-index:2;background:#1b0e16;padding-top:16px;margin-top:-16px;box-shadow:0 8px 12px #160b1240}
.harem-affinity-help-dialog section{padding:0 0 16px;margin-bottom:18px;border-bottom:1px solid #b48b5026}
.harem-affinity-help-dialog h3{font-size:15px;line-height:1.5;margin:0 0 8px;color:#ead0a4;font-weight:600}
.harem-affinity-help-dialog .harem-credit-copy{font-size:14px;margin:0;line-height:1.85;color:#dcc8d3}
/* Cupid's affinityFloat timing (4s), with custom vector hearts and reply-local anchors.
   Chat scales with the viewport; JS sizes VN from the painted character image. */
.harem-heart-effect{position:fixed;z-index:15000;pointer-events:none;display:flex;align-items:center;gap:clamp(5px,.8vmin,12px);font-size:clamp(32px,4.5vmin,72px);line-height:1.2;font-weight:900;white-space:nowrap;color:#ff5269;text-shadow:0 0 10px #000c,2px 2px 8px #0009;animation:haremAffinityFloat 4s ease-out forwards}
.harem-heart-effect.negative{color:#b5c8ff}
.harem-heart-effect.neutral{color:#f4ecf2;background:transparent}
/* Resolution-independent enamel hearts. The neutral center stays transparent. */
.harem-affinity-icon{display:inline-block;flex:0 0 auto;width:1.35em;height:1.35em;overflow:hidden;text-indent:-9999px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27body%27%20x1%3D%27.25%27%20y1%3D%270%27%20x2%3D%27.7%27%20y2%3D%271%27%3E%3Cstop%20stop-color%3D%27%23ff9eae%27%2F%3E%3Cstop%20offset%3D%27.32%27%20stop-color%3D%27%23ff527b%27%2F%3E%3Cstop%20offset%3D%27.65%27%20stop-color%3D%27%23e91e55%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%239d123b%27%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%27light%27%20cx%3D%27.28%27%20cy%3D%27.15%27%20r%3D%27.8%27%3E%3Cstop%20stop-color%3D%27%23fff%27%20stop-opacity%3D%27.7%27%2F%3E%3Cstop%20offset%3D%27.55%27%20stop-color%3D%27%23ffdce7%27%20stop-opacity%3D%270%27%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%27M32%2057C27%2053.4%205%2039.4%205%2023.3C5%2014%2011.1%207.8%2019.7%207.8C25.1%207.8%2029.2%2010.5%2032%2015C34.8%2010.5%2038.9%207.8%2044.3%207.8C52.9%207.8%2059%2014%2059%2023.3C59%2039.4%2037%2053.4%2032%2057Z%27%20fill%3D%27url(%23body)%27%20stroke%3D%27%23ffb7ca%27%20stroke-width%3D%27.8%27%2F%3E%3Cpath%20d%3D%27M32%2057C27%2053.4%205%2039.4%205%2023.3C5%2014%2011.1%207.8%2019.7%207.8C25.1%207.8%2029.2%2010.5%2032%2015C34.8%2010.5%2038.9%207.8%2044.3%207.8C52.9%207.8%2059%2014%2059%2023.3C59%2039.4%2037%2053.4%2032%2057Z%27%20fill%3D%27url(%23light)%27%2F%3E%3Cpath%20d%3D%27M11.8%2022C12.5%2015.4%2017%2012.3%2022%2013.6%27%20fill%3D%27none%27%20stroke%3D%27%23fff4f7%27%20stroke-width%3D%273.4%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.86%27%2F%3E%3Cpath%20d%3D%27M39.4%2013.3C43.5%2011.7%2048.3%2013.1%2050.9%2016.1%27%20fill%3D%27none%27%20stroke%3D%27%23ffebf1%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.65%27%2F%3E%3Cpath%20d%3D%27M13%2035.3C18.1%2043.3%2026.9%2050.1%2032%2053.9C37.5%2049.7%2043.3%2044.8%2047.4%2039.4%27%20fill%3D%27none%27%20stroke%3D%27%23ff9fba%27%20stroke-width%3D%271.1%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.52%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.negative .harem-affinity-icon{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27body%27%20x1%3D%27.2%27%20y1%3D%270%27%20x2%3D%27.8%27%20y2%3D%271%27%3E%3Cstop%20stop-color%3D%27%238ea9eb%27%2F%3E%3Cstop%20offset%3D%27.3%27%20stop-color%3D%27%235377c1%27%2F%3E%3Cstop%20offset%3D%27.65%27%20stop-color%3D%27%23263f7a%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23142348%27%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%27M30%2014.2C27.5%2010.2%2023.9%207.8%2019.7%207.8C11.1%207.8%205%2014%205%2023.3C5%2037.9%2022.9%2050.8%2029.5%2055.5L26.9%2040.7L33.8%2033.1L26.8%2026.6Z%27%20fill%3D%27url(%23body)%27%20stroke%3D%27%23b5c9f7%27%20stroke-width%3D%27.8%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M34.1%2014.2L30.7%2025.6L37.5%2032.3L30.9%2041.6L34.2%2055.3C41.5%2050%2059%2037.4%2059%2023.3C59%2014%2052.9%207.8%2044.3%207.8C40.1%207.8%2036.6%2010.2%2034.1%2014.2Z%27%20fill%3D%27url(%23body)%27%20stroke%3D%27%23b5c9f7%27%20stroke-width%3D%27.8%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M11.8%2022C12.5%2015.4%2017%2012.3%2022%2013.6%27%20fill%3D%27none%27%20stroke%3D%27%23eef4ff%27%20stroke-width%3D%273.4%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.8%27%2F%3E%3Cpath%20d%3D%27M39.4%2013.3C43.5%2011.7%2048.3%2013.1%2050.9%2016.1%27%20fill%3D%27none%27%20stroke%3D%27%23dde8ff%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.65%27%2F%3E%3Cpath%20d%3D%27M30.7%2025.6L37.5%2032.3L30.9%2041.6%27%20fill%3D%27none%27%20stroke%3D%27%23e5efff%27%20stroke-width%3D%271.3%27%20stroke-linejoin%3D%27round%27%20opacity%3D%27.9%27%2F%3E%3C%2Fsvg%3E")}
.neutral .harem-affinity-icon{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27rim%27%20x1%3D%27.2%27%20y1%3D%270%27%20x2%3D%27.8%27%20y2%3D%271%27%3E%3Cstop%20stop-color%3D%27%23fff9fd%27%2F%3E%3Cstop%20offset%3D%27.4%27%20stop-color%3D%27%23ecd5e6%27%2F%3E%3Cstop%20offset%3D%27.8%27%20stop-color%3D%27%23ae8fa9%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23f7e8f2%27%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%27M32%2057C27%2053.4%205%2039.4%205%2023.3C5%2014%2011.1%207.8%2019.7%207.8C25.1%207.8%2029.2%2010.5%2032%2015C34.8%2010.5%2038.9%207.8%2044.3%207.8C52.9%207.8%2059%2014%2059%2023.3C59%2039.4%2037%2053.4%2032%2057Z%27%20fill%3D%27none%27%20stroke%3D%27%23493145%27%20stroke-width%3D%274.6%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M32%2057C27%2053.4%205%2039.4%205%2023.3C5%2014%2011.1%207.8%2019.7%207.8C25.1%207.8%2029.2%2010.5%2032%2015C34.8%2010.5%2038.9%207.8%2044.3%207.8C52.9%207.8%2059%2014%2059%2023.3C59%2039.4%2037%2053.4%2032%2057Z%27%20fill%3D%27none%27%20stroke%3D%27url(%23rim)%27%20stroke-width%3D%272.4%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M7.8%2022.7C7.8%2015.2%2012.8%2010.6%2019.5%2010.6%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-width%3D%271.2%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E")}
.harem-heart-effect .harem-affinity-icon{filter:drop-shadow(0 2px 2px #23061780);animation:haremHeartBloom .7s cubic-bezier(.2,.8,.25,1) both}
.harem-heart-effect .harem-affinity-value{font-variant-numeric:tabular-nums;letter-spacing:-.025em}
.harem-heart-effect img,.harem-heart-effect .ft-msg-avatar{width:1em!important;height:1em!important;border-radius:50%;object-fit:cover}
.harem-reply-affinity{display:inline-flex;flex:0 0 auto;align-items:center;gap:4px;margin-left:5px;padding:2px 7px;border:1px solid #ef516966;border-radius:8px;background:#54152a88;color:#ff8091;font-size:12px;font-weight:800;line-height:1.4;white-space:nowrap;font-variant-numeric:tabular-nums;vertical-align:middle}
.harem-reply-affinity.negative{background:#dce5ff;color:#233876;border-color:#a9bae8}
.harem-reply-affinity.neutral{background:transparent;border-color:#c2b4c266;color:#e8dfe6}
.harem-reply-affinity .harem-affinity-icon{width:1.2em;height:1.2em}
@keyframes haremAffinityFloat{
    0%{opacity:0;transform:translateX(-50%) translateY(4vh) scale(.3) rotate(-5deg)}
    10%{opacity:1;transform:translateX(-50%) translateY(0) scale(1.3) rotate(2deg)}
    20%{transform:translateX(-50%) translateY(-2vh) scale(1.2) rotate(-1deg)}
    30%{transform:translateX(-50%) translateY(-.7vh) scale(1.1) rotate(0deg)}
    40%{transform:translateX(-50%) translateY(-.7vh) scale(1.05) rotate(0deg)}
    50%{transform:translateX(-50%) translateY(-1.3vh) scale(1.15) rotate(0deg)}
    60%{transform:translateX(-50%) translateY(-.7vh) scale(1) rotate(0deg)}
    85%{opacity:1;transform:translateX(-50%) translateY(-4vh) scale(1) rotate(0deg)}
    100%{opacity:0;transform:translateX(-50%) translateY(-13vh) scale(.6) rotate(3deg)}
}
@keyframes haremHeartBloom{0%{transform:rotate(-14deg) scale(.65)}55%{transform:rotate(7deg) scale(1.1)}78%{transform:rotate(-3deg) scale(.98)}100%{transform:rotate(0deg) scale(1)}}

/* Reply receipts use the same jewel palette without a bright panel over the scene. */
.harem-reply-affinity{border-color:#c2789355;background:#472036;color:#ffc1d3;box-shadow:inset 0 1px #ffffff0a;font-variant-numeric:tabular-nums}
.harem-reply-affinity.negative{border-color:#7088bc70;background:#202c49;color:#c8d7ff}
.harem-reply-affinity.neutral{border-color:#b9a4b650;background:#241c29;color:#ddd0dc}
@media(max-width:600px){.app__header:has(.harem-credit-button){flex-wrap:wrap}.app__actions:has(.harem-credit-button){flex-wrap:wrap;gap:6px}.ft-header-actions:has(.harem-credit-button){flex-wrap:wrap;gap:5px}.harem-credit-button{font-size:11px;padding:6px 8px}.harem-credit-dialog{padding:18px;border-radius:18px}.harem-credit-heading h2{font-size:20px}.harem-affinity-help-dialog .harem-credit-heading{top:-18px}.harem-credit-summary{padding:20px 16px}.harem-evaluation-list{padding:10px 12px 12px}.harem-evaluation-row{grid-template-columns:minmax(54px,80px) minmax(36px,1fr) 32px;gap:9px}}
@media(max-height:480px){.harem-credit-dialog{padding:16px}.harem-credit-heading{margin-bottom:12px;padding-bottom:10px}.harem-affinity-help-dialog .harem-credit-heading{top:-16px}.harem-credit-summary{padding:14px}}
@media(prefers-reduced-motion:reduce){.harem-heart-effect{animation:none;opacity:1;transform:translateX(-50%)}.harem-heart-effect .harem-affinity-icon{animation:none}.harem-evaluation-marker{transition:none}}

/* Wallet and attendance reuse the existing rose-velvet artwork and brand emblem. */
.harem-credit-dialog:not(.harem-affinity-help-dialog) {
    --credit-art: url("../images/ui/rose-velvet-button.webp");
    width: min(520px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    padding: 24px;
    border: 1px solid #92704c;
    border-radius: 16px;
    background: #1b1017;
    box-shadow: inset 0 0 0 4px #1b1017, inset 0 0 0 5px #6f503440, 0 24px 80px #000a;
}
.harem-credit-dialog:not(.harem-affinity-help-dialog) .harem-credit-heading {
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 16px;
}
.harem-credit-dialog:not(.harem-affinity-help-dialog) .harem-credit-heading::before {
    content: "";
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 24%;
    background: url("../images/ui/brand-mark.webp") center / contain no-repeat;
}
.harem-credit-dialog:not(.harem-affinity-help-dialog) .harem-credit-heading h2 { flex: 1; font-size: 21px; }
.harem-credit-dialog:not(.harem-affinity-help-dialog) .harem-credit-close {
    border-color: #705443;
    border-radius: 10px;
    background: linear-gradient(#180e1388, #180e1388), var(--credit-art) center / auto 100% no-repeat;
    box-shadow: inset 0 0 0 1px #705443, inset 0 2px #ffffff12;
}
.harem-credit-summary {
    padding: 22px 40px;
    border: 0 solid transparent;
    border-image: url("../images/ui/rose-velvet-button.webp") 9% 14% fill / 7px 38px / 0 stretch;
    border-radius: 10px;
    background: #321016;
    box-shadow: 0 5px 16px #0003;
}
.harem-credit-summary::before, .harem-credit-summary::after { content: none; }
.harem-credit-caption { color: #e4c9a4; letter-spacing: .04em; }
.harem-credit-total { color: #ffebc3; font-family: var(--font-serif, "Gowun Batang", serif); font-weight: 700; }
.harem-credit-summary .harem-credit-muted { color: #e0c7b8; }
.harem-credit-rules { padding: 0 4px; }
.harem-credit-progress {
    margin: 18px 0 12px;
    padding: 16px 4px;
    border: 0;
    border-top: 1px solid #b48b5040;
    border-bottom: 1px solid #b48b5040;
    border-radius: 0;
    background: transparent;
}
.harem-credit-progress strong { color: #eed4a8; }
.harem-credit-conversion { padding-bottom: 10px; }
.harem-credit-dialog:not(.harem-affinity-help-dialog) .harem-credit-action {
    position: relative;
    isolation: isolate;
    min-height: 48px;
    padding: 12px 28px;
    border: 1px solid #705443;
    border-radius: 8px;
    color: #eed8bb;
    background: #24151d;
    box-shadow: inset 0 1px #ffffff1f, 0 2px 3px #0003;
}
.harem-credit-dialog:not(.harem-affinity-help-dialog) .harem-credit-action::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 0 solid transparent;
    border-image: var(--credit-art) 9% 14% fill / 5px 22px / 0 stretch;
    border-radius: inherit;
    clip-path: inset(0 round 8px);
    opacity: .55;
    pointer-events: none;
}
.harem-credit-dialog:not(.harem-affinity-help-dialog) .harem-credit-action--primary {
    color: #fff1d6;
    border-color: transparent;
    background: #321016;
    box-shadow: 0 3px 0 #754c33, 0 6px 14px #0004;
}
.harem-credit-dialog:not(.harem-affinity-help-dialog) .harem-credit-action--primary::before { opacity: 1; }
:is(.harem-attendance-dialog, .harem-attendance-notice)>h2 { text-align: center; }
:is(.harem-attendance-dialog, .harem-attendance-notice)>h2::before {
    content: "";
    display: block;
    width: 76px;
    height: 76px;
    margin: 0 auto 12px;
    border-radius: 24%;
    background: url("../images/ui/brand-mark.webp") center / contain no-repeat;
}
:is(.harem-attendance-dialog, .harem-attendance-notice)>.harem-credit-copy { text-align: center; }
.harem-attendance-dialog>.harem-credit-muted { text-align: center; margin-bottom: 20px; }
.harem-credit-toast {
    padding: 16px 30px;
    border: 0 solid transparent;
    border-image: url("../images/ui/rose-velvet-button.webp") 9% 14% fill / 5px 22px / 0 stretch;
    border-radius: 8px;
    background: #321016;
    color: #fff1d6;
}
@media(max-width:600px) {
    .harem-credit-dialog:not(.harem-affinity-help-dialog) { padding: 20px; }
    .harem-credit-dialog:not(.harem-affinity-help-dialog) .harem-credit-heading { gap: 10px; }
    .harem-credit-dialog:not(.harem-affinity-help-dialog) .harem-credit-heading h2 { font-size: 19px; }
    .harem-credit-dialog:not(.harem-affinity-help-dialog) .harem-credit-heading::before { flex-basis: 40px; width: 40px; height: 40px; }
    .harem-credit-summary { padding: 20px 32px; border-image-width: 7px 30px; }
}
@media(max-height:480px) {
    .harem-credit-dialog:not(.harem-affinity-help-dialog) { padding: 16px 20px; }
    :is(.harem-attendance-dialog, .harem-attendance-notice)>h2::before { width: 44px; height: 44px; margin-bottom: 8px; }
}