.honor-top { display:flex; align-items:center; flex-wrap:wrap; gap:24px; border:1px solid #b47c6545; border-radius:11px; padding:22px; background:linear-gradient(125deg,#42202e22,#10151f); margin-bottom:22px; }.honor-progress { flex:1; min-width:210px; }.honor-progress-heading { display:flex; justify-content:space-between; gap:20px; margin-bottom:14px; font-size:.83rem; }.honor-progress-heading strong { color:#efd7b5; font-weight:500; }.honor-progress-heading span { color:#dba69b; }.honor-progress progress { display:block; width:100%; height:6px; border:0; accent-color:#ca8b7c; }.honor-progress progress::-webkit-progress-bar { background:#302632; border-radius:4px; }.honor-progress progress::-webkit-progress-value { background:linear-gradient(90deg,#ad4562,#debd83); border-radius:4px; }.honor-progress>small { display:block; margin-top:10px; color:#ac96ae; font-size:.63rem; }
.honor-example { display:flex; flex-direction:column; gap:9px; color:#bca4b9; font-size:.66rem; }.honor-example select { border:1px solid #b87b6355; border-radius:6px; padding:10px 12px; background:#10151d; color:#e6c7a7; font:inherit; font-size:.75rem; }
.honor-layout { display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:21px; align-items:start; }.honor-groups { display:grid; gap:17px; }.honor-rank { padding:21px; border:1px solid #a87c6538; border-radius:11px; background:linear-gradient(130deg,#2e20252b,#11151e); }.honor-rank-heading { display:flex; align-items:center; gap:12px; margin-bottom:19px; }.honor-rank-heading .honor-medal-image { width:34px; height:34px; }.honor-rank-heading h4 { font:500 .9rem var(--font-ui); color:var(--rank-color); margin:0; }.honor-rank-heading>small { color:#ac98af; font-size:.63rem; margin-left:auto; }
.honor-slots { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:13px; max-width:550px; }.loyalty-profile .honor-slot { position:relative; min-width:0; height:83px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:10px 6px; border:1px solid #a1876b40; border-radius:7px; background:#0d141e; }.loyalty-profile .honor-slot.is-open { border-color:color-mix(in srgb,var(--rank-color),transparent 48%); background:linear-gradient(135deg,#ffffff06,#0d141e); }.loyalty-profile .honor-slot.is-locked { border-style:dashed; border-color:#7482953d; }.loyalty-profile .honor-slot[aria-pressed=true] { border-style:solid; border-color:#e5b780; box-shadow:0 0 0 2px #dd7b8d24; background:#6225392b; }
.honor-native { display:block; position:relative; overflow:hidden; width:34px; height:34px; border-radius:5px; border:1px solid #ccb89833; background:#0e1420; }.honor-native img { position:absolute; top:0; left:0; width:160%; height:160%; max-width:none; object-fit:fill; }.honor-lock { width:19px; height:19px; background:#788392; mask:url('/assets/icons/lock-keyhole.svg') center/contain no-repeat; -webkit-mask:url('/assets/icons/lock-keyhole.svg') center/contain no-repeat; opacity:.6; margin:7px 0; }.honor-slot-level { font-size:.6rem; color:#d7b994; }.honor-slot.is-locked .honor-slot-level { color:#6f7887; }
.honor-aside { padding:22px 19px; border:1px solid #bd80674a; border-top:2px solid #c4966a; border-radius:11px; background:radial-gradient(ellipse at top left,#9c31431c,transparent 70%),#11151f; }.honor-aside>.honor-medal-image { width:64px; height:64px; display:block; margin:20px 0 14px; object-fit:contain; }.honor-aside h4 { color:#efd1ae; font-size:1rem; line-height:1.7; font-weight:500; margin:0 0 10px; }.honor-kicker { display:block; color:#ca8e9e; font-size:.52rem; letter-spacing:1.2px; line-height:1.8; }.honor-note { color:#baa3b9; font-size:.72rem; line-height:1.8; }.honor-slot-detail { margin-top:23px; border-top:1px solid #b5826338; padding-top:20px; }.honor-slot-detail>strong { display:block; color:#ebc18e; font-size:.95rem; margin-top:12px; }.honor-slot-detail>.honor-native { margin-top:17px; }.honor-state { color:#d0a1ac; font-size:.73rem; line-height:1.8; margin:13px 0; }.honor-slot-detail dl>div { border-top:1px solid #b17a5e24; padding:12px 0; }.honor-slot-detail dt { color:#b099ad; font-size:.63rem; margin-bottom:6px; }.honor-slot-detail dd { color:#dfc3a5; margin:0; font-size:.76rem; line-height:1.7; }.honor-demo { margin-top:22px; color:#b8a0b8; border-left:2px solid #b2576b; padding-left:12px; font-size:.68rem; line-height:1.9; }
@media(max-width:900px) { .honor-layout { grid-template-columns:1fr; }.honor-aside { grid-row:1; }.honor-slot-detail dl { display:grid; grid-template-columns:repeat(2,1fr); gap:0 20px; }.honor-slots { max-width:none; } }
@media(max-width:550px) { .honor-top { padding:18px; }.honor-rank { padding:16px; }.honor-slots { gap:8px; }.loyalty-profile .honor-slot { height:70px; padding:8px 2px; }.honor-native { width:27px; height:27px; }.honor-slot-level { font-size:.5rem; }.honor-rank-heading>small { font-size:.55rem; } }
@media(prefers-reduced-motion:reduce) { .honor-system * { animation:none!important; transition:none!important; } }