.merit-layout { display:grid; grid-template-columns:190px minmax(0,1fr) 215px; gap:22px; align-items:start; }.merit-sidebar,.merit-selection { padding:21px 18px; border:1px solid #bd7c6752; border-radius:11px; background:radial-gradient(ellipse at top,#9c36491c,transparent 65%),#11151f; box-shadow:inset 0 2px #c68f6740; }
.merit-kicker { display:block; color:#d9949e; font-size:.53rem; letter-spacing:1.3px; line-height:1.8; margin-bottom:12px; }.merit-layout h4 { color:#f0d6b4; font-size:1rem; font-weight:500; margin:0 0 12px; }.merit-note { color:#bca7be; font-size:.71rem; line-height:1.9; }.merit-grades { display:grid; gap:8px; margin:22px 0; }
.loyalty-profile .merit-grade { text-align:left; padding:12px 14px; background:linear-gradient(110deg,#d2ab6610,#11151f); color:#d4b586; }.loyalty-profile .merit-grade.grade-1 { color:#c6d3df; }.loyalty-profile .merit-grade.grade-2 { color:#a9ceea; }.loyalty-profile .merit-grade[aria-pressed=true] { border-color:#d5aa776e; box-shadow:inset 3px 0 #d7ac75; background:#75354626; }
.merit-paths h5 { color:#b49aae; text-transform:uppercase; font-size:.57rem; letter-spacing:1.4px; margin:19px 0 11px; }.loyalty-profile .merit-path { display:block; width:100%; margin:6px 0; text-align:left; font-size:.71rem; line-height:1.7; padding:10px 12px; background:none; border-color:#a96f6328; }.loyalty-profile .merit-path[aria-pressed=true] { border-color:#cf778670; color:#f5d3b3; background:#9c30451a; }
.merit-main { min-width:0; overflow-x:auto; border:1px solid #b2786540; border-radius:12px; background:radial-gradient(ellipse at 50% 20%,#a73b5020,transparent 65%),#0d131d; scrollbar-width:thin; scrollbar-color:#8f5a63 #10131c; }.merit-summary { padding:24px; border-bottom:1px solid #be8b6033; }.merit-summary h4 { font-size:1.2rem; }.merit-summary progress { width:100%; height:5px; border:0; border-radius:4px; accent-color:#d29377; margin-top:17px; display:block; }.merit-summary progress::-webkit-progress-bar { background:#302431; }.merit-summary progress::-webkit-progress-value { background:linear-gradient(90deg,#b74461,#deb47b); }
.merit-board { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:25px 14px; padding:29px 22px; min-width:510px; position:relative; }
.loyalty-profile .merit-skill { position:relative; display:flex; flex-direction:column; justify-content:start; align-items:center; gap:10px; min-height:145px; padding:15px 7px 12px; background:linear-gradient(155deg,#382430,#111822); border:1px solid #c29c6769; border-radius:10px; box-shadow:inset 0 1px #f1cb8e0b; }.merit-skill:not(:nth-child(5n)):not(:last-child)::after { content:''; position:absolute; left:100%; top:41px; width:15px; height:1px; background:#bb8d6080; pointer-events:none; }.merit-skill::before { content:''; position:absolute; left:50%; bottom:100%; height:26px; width:1px; background:#a3786959; pointer-events:none; }.merit-skill:nth-child(-n+5)::before { display:none; }
.loyalty-profile .merit-skill.is-locked { border-color:#6372854d; background:#111720; }.merit-skill.is-locked .merit-native-icon { opacity:.35; }.loyalty-profile .merit-skill[aria-pressed=true] { border-color:#e8b486; box-shadow:0 0 0 2px #db72822b,0 0 20px #bd4c5e18; background:linear-gradient(145deg,#6d2d3e55,#1b1823); }
.merit-native-icon { position:relative; display:block; width:36px; height:36px; overflow:hidden; border-radius:7px; flex-shrink:0; background:#0c1520; border:1px solid #b5a07955; }.merit-native-icon img { position:absolute; left:0; top:0; width:160%; height:160%; max-width:none; object-fit:fill; }.merit-skill-id { position:absolute; right:6px; top:5px; font-size:.47rem; color:#bb919d; }.merit-skill strong { font-size:.6rem; color:#ddc8ce; line-height:1.6; font-weight:500; text-align:center; overflow-wrap:anywhere; }.merit-level { color:#edc48a; font-size:.65rem; margin-top:auto; font-variant-numeric:tabular-nums; }
.merit-detail>.merit-native-icon { width:44px; height:44px; margin:22px 0 17px; }.merit-selected-name { display:block; font-size:1rem; line-height:1.6; color:#ecc9a6; font-weight:500; }.merit-state { display:block; color:#ce9caa; font-size:.65rem; line-height:1.8; margin:11px 0 19px; }.merit-detail dl>div { padding:12px 0; border-top:1px solid #b6855e26; }.merit-detail dt { color:#b49bae; font-size:.62rem; margin-bottom:7px; }.merit-detail dd { color:#e2c4a4; font-size:.78rem; margin:0; line-height:1.7; }.merit-detail>.merit-note { margin-top:16px; }.merit-demo { margin-top:22px; padding-left:13px; border-left:2px solid #b3556c; color:#bfa9bf; font-size:.69rem; line-height:1.9; }
@media(max-width:1150px) { .merit-layout { grid-template-columns:minmax(0,1fr) 210px; }.merit-sidebar { grid-column:1/-1; }.merit-grades { display:flex; flex-wrap:wrap; }.merit-paths { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }.merit-paths h5 { margin:8px; }.loyalty-profile .merit-path { width:auto; margin:0; }.merit-grades { margin:15px 0; } }
@media(max-width:750px) { .merit-layout { grid-template-columns:minmax(0,1fr); gap:18px; }.merit-selection { grid-row:3; }.merit-detail dl { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }.merit-summary { padding:20px; }.merit-board { padding:26px 18px; min-width:510px; } }
@media(prefers-reduced-motion:reduce) { .merit-layout * { animation:none!important; transition:none!important; } }
.merit-sidebar,.merit-selection { background:radial-gradient(ellipse at top left,#ae3d5425,transparent 65%),linear-gradient(155deg,#1d1824,#0e131d); border-color:#c0886a55; box-shadow:inset 0 1px #ebc18b19,0 12px 28px #0002; border-radius:14px; }
.merit-grades { gap:11px; }.loyalty-profile .merit-grade { position:relative; display:flex; align-items:center; gap:12px; padding:13px 10px; border-radius:10px; color:#dab480; transition:background .2s,border-color .2s,transform .2s; }
.merit-grade-crest { width:33px; height:39px; display:grid; place-items:center; border:1px solid currentColor; border-radius:13px 13px 7px 7px; flex-shrink:0; background:linear-gradient(150deg,#ffffff09,#ffffff00); box-shadow:inset 0 0 0 3px #ffffff05; }.merit-grade-crest i { font-size:1rem; }.merit-menu-copy { flex:1; min-width:0; }.merit-menu-copy strong { display:block; color:inherit; font-size:.74rem; font-weight:500; line-height:1.6; }.merit-menu-copy small { display:block; color:#a28b9f; font-size:.52rem; letter-spacing:.6px; line-height:1.6; margin-top:5px; }
.loyalty-profile .merit-grade[aria-pressed=true] { color:#f4cf9a; background:linear-gradient(105deg,#7b324247,#c6934611); border-color:#d5ac727d; box-shadow:inset 0 -2px #d6ab73,0 6px 14px #0002; }.loyalty-profile .merit-grade.grade-1[aria-pressed=true] { color:#e0e8f4; border-color:#a2b1cb80; box-shadow:inset 0 -2px #a2b1cb,0 6px 14px #0002; }.loyalty-profile .merit-grade.grade-2[aria-pressed=true] { color:#b9e1f7; border-color:#78afc580; box-shadow:inset 0 -2px #78afc5,0 6px 14px #0002; }
.merit-paths h5 { display:flex; align-items:center; gap:9px; color:#d59f9f; }.merit-paths h5::after { content:''; height:1px; flex:1; background:linear-gradient(90deg,#c87d6c44,transparent); }
.loyalty-profile .merit-path { display:flex; align-items:center; gap:10px; border-radius:9px; padding:12px 10px; margin:8px 0; background:#ffffff02; transition:border-color .2s,background .2s,transform .2s; }.merit-path .merit-native-icon { width:29px; height:29px; border-color:#bd8e6659; border-radius:6px; }.merit-path .merit-menu-copy strong { font-size:.68rem; }.merit-path .merit-menu-copy small { font-size:.5rem; letter-spacing:0; }
.loyalty-profile .merit-path[aria-pressed=true] { color:#f7d1bb; border-color:#cf7e827d; background:linear-gradient(100deg,#8c30453d,#251722); box-shadow:inset 2px 0 #dc7e8a; }.loyalty-profile .merit-grade:hover,.loyalty-profile .merit-path:hover { transform:translateX(2px); }
.merit-selection { border-top:2px solid #c58f71; }.merit-state { padding:7px 10px; border:1px solid #bf69743b; border-radius:6px; background:#ac3b5110; }.merit-main { border-radius:14px; }.merit-summary { background:linear-gradient(110deg,#64233422,transparent); }
@media(max-width:1150px) { .merit-grades { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }.merit-paths { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.merit-paths h5 { grid-column:1/-1; margin:13px 0 4px; }.loyalty-profile .merit-path { width:100%; margin:0; } }
@media(max-width:430px) { .merit-grade-crest { width:26px; height:31px; }.loyalty-profile .merit-grade { padding:11px 7px; gap:7px; }.merit-grade .merit-menu-copy strong { font-size:.65rem; }.merit-paths { grid-template-columns:1fr; }.merit-paths h5 { grid-column:auto; } }
@media(prefers-reduced-motion:reduce) { .loyalty-profile .merit-grade:hover,.loyalty-profile .merit-path:hover { transform:none; } }
.merit-grade-crest { width:36px; height:40px; border:0; border-radius:0; background:none; box-shadow:none; }.merit-native-badge { display:block; width:36px; height:36px; object-fit:contain; filter:none; }.loyalty-profile .merit-grade { background:#ffffff02; }.loyalty-profile .merit-grade[aria-pressed=true] { background:#a17a3220; box-shadow:inset 2px 0 #c8a368; }.loyalty-profile .merit-grade.grade-1[aria-pressed=true] { background:#8294ac12; box-shadow:inset 2px 0 #a2b1cb; }.loyalty-profile .merit-grade.grade-2[aria-pressed=true] { background:#6893a812; box-shadow:inset 2px 0 #78afc5; }