/* Hallmark · component: membership card · theme: approved five materials
 * Shared by administration and member center. P4 H5 E4 S5 R5 V4. */
:root{--preview-display:"Noto Serif SC",serif;--preview-light:#fff;--preview-grid:rgba(255,255,255,.05);--preview-shine:rgba(255,255,255,.28);--preview-edge:rgba(255,255,255,.28);--ease-out:cubic-bezier(.16,1,.3,1)}
/* Same credential template in the member area and the administration preview. */
.system-credential[data-material="stone"]{--material-bg:linear-gradient(135deg,#2a2f38,#4a5465);--material-base:#2a2f38;--material-ink:#f0f3fa;--material-muted:#e0e6ef;--material-accent:#aeb9cc;--material-button:#aeb9cc;--material-button-ink:#182131;--material-swatch:#8b95a5}
.system-credential[data-material="silver"]{--material-bg:linear-gradient(135deg,#dde4ef 0%,#c3cedf 40%,#dbe3f0 52%,#a9b7cf 68%,#8e9db8 100%);--material-base:#c3cedf;--material-ink:#16203a;--material-muted:#2a3a5c;--material-accent:#16203a;--material-button:#0b1220;--material-button-ink:#ffffff;--material-swatch:#9fb0cc}
.system-credential[data-material="gilded"]{--material-bg:linear-gradient(135deg,#1c1405 0%,#5a430e 38%,#77601f 52%,#5a430e 66%,#120d03 100%);--material-base:#1c1405;--material-ink:#fff2c8;--material-muted:#fff2c8;--material-accent:#d3a653;--material-button:#d3a653;--material-button-ink:#261d0e;--material-swatch:#d3a653}
.system-credential[data-material="obsidian"]{--material-bg:radial-gradient(120% 120% at 20% 0%,#2a2415 0%,#0a0a0f 55%,#000000 100%);--material-base:#0a0a0f;--material-ink:#e8c476;--material-muted:#e5d5ad;--material-accent:#e8c476;--material-button:#e8c476;--material-button-ink:#1a1408;--material-swatch:#e8c476}
.system-credential[data-material="nebula"]{--material-bg:linear-gradient(135deg,#0b0b18,#1a1040);--material-base:#0b0b18;--material-ink:#f2eeff;--material-muted:#dbd3f1;--material-accent:#bca2f7;--material-button:#f2eeff;--material-button-ink:#1a1040;--material-swatch:#b48cff}
[data-card-slot]{perspective:1000px;min-width:0}
.system-credential{container-type:inline-size;position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-width:0;min-height:218px;overflow:hidden;border:1px solid var(--preview-edge);border-radius:16px;padding:20px 22px;background-color:var(--material-base);background-image:var(--material-bg);color:var(--material-ink);box-shadow:0 8px 20px color-mix(in srgb,var(--material-base) 12%,transparent);transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .5s var(--ease-out)}
.system-credential[data-hover="true"]{transition-duration:.12s}
.system-credential::after{position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(120deg,var(--preview-edge),transparent 35%,transparent 65%,var(--preview-edge));mask:linear-gradient(var(--preview-light) 0 0) content-box,linear-gradient(var(--preview-light) 0 0);mask-composite:exclude;content:'';pointer-events:none}
.credential-grid,.credential-aura,.credential-gloss{position:absolute;inset:0;z-index:-1;pointer-events:none}
.credential-grid{background-image:linear-gradient(var(--preview-grid) 1px,transparent 1px),linear-gradient(90deg,var(--preview-grid) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(var(--preview-light),transparent 90%)}
.credential-gloss{background:radial-gradient(600px circle at var(--mx,70%) var(--my,10%),var(--preview-shine),transparent 45%);mix-blend-mode:screen}
.credential-sweep{position:absolute;z-index:-1;top:-50%;bottom:-50%;left:-50%;width:28%;pointer-events:none;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--preview-light) 10%,transparent),transparent);transform:translateX(-100%) skewX(-20deg)}
.system-credential[data-effect="shine"] .credential-sweep{animation:credential-sweep 5.6s linear infinite}
@keyframes credential-sweep{to{transform:translateX(650%) skewX(-20deg)}}
.credential-aura{display:none;opacity:1;background:linear-gradient(110deg,transparent 20%,rgba(124,92,255,.5),rgba(0,229,204,.45),rgba(255,92,168,.5),transparent 80%);background-size:250% 100%}
.system-credential[data-material="nebula"] .credential-aura{display:block}
.system-credential[data-material="nebula"][data-effect="shine"] .credential-aura{animation:credential-aura 6s linear infinite}
@keyframes credential-aura{to{background-position:-250% 0}}
.credential-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.credential-host{max-width:calc(100% - 105px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--material-muted);font-size:11px;letter-spacing:.04em}
.credential-renew{display:inline-flex;align-items:center;justify-content:center;min-height:44px;flex-shrink:0;padding:0;border:0;border-radius:6px;background:transparent;color:var(--material-button-ink);font-size:12px;font-weight:600;line-height:16px;white-space:nowrap}
.credential-renew span{display:block;padding:6px 10px;border-radius:6px;background:var(--material-button)}
.credential-renew:hover{filter:brightness(1.08)}.credential-renew:focus-visible{outline-color:var(--material-ink)}
.system-credential .credential-name{min-width:0;max-width:100%;overflow-wrap:anywhere;margin:0;font-family:var(--preview-display);font-weight:900;font-size:clamp(26px,8cqi,42px);letter-spacing:normal;line-height:1.18;color:var(--material-ink)}
.credential-expiry{margin:8px 0 0;font-size:11px;line-height:1.5;color:var(--material-muted);font-variant-numeric:tabular-nums}
.credential-owner{display:flex;align-items:center;gap:10px;min-width:0}
.credential-avatar{display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--material-accent) 20%,var(--material-base));color:var(--material-ink);border:1px solid color-mix(in srgb,var(--material-ink) 28%,transparent);font-size:12px;font-weight:800}
.credential-owner-text{min-width:0}.credential-user{display:block;font-size:13px;font-weight:700;color:var(--material-ink)}
.credential-email{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;line-height:1.4;color:var(--material-muted)}

.system-credential a{text-decoration:none}
.tier-card-preview{padding:16px 18px}
.system-credential .credential-renew:focus-visible{outline:3px solid var(--material-ink);outline-offset:3px}
.system-credential .credential-renew:active{transform:translateY(1px)}
.system-credential .credential-avatar img{display:block;width:100%;height:100%;border-radius:inherit;object-fit:cover}
.credential-conversion{margin-left:auto;align-self:center;min-height:44px;padding:0 8px;border:0;background:transparent;color:var(--material-muted);font-size:11px;cursor:pointer;white-space:nowrap}
.credential-conversion:focus-visible{outline:3px solid var(--material-ink);outline-offset:2px}
.credential-conversion:hover{text-decoration:underline}
@media(max-width:560px){.system-credential{padding:18px;min-height:228px}.system-credential .credential-name{font-size:clamp(24px,9cqi,34px)}.credential-top{gap:8px}.credential-renew{font-size:11px}.credential-conversion{font-size:10px;padding:0 4px}}
@media(prefers-reduced-motion:reduce){.system-credential[data-material="nebula"][data-effect="shine"] .credential-aura,.system-credential[data-effect="shine"] .credential-sweep{animation:none}.system-credential{transform:none;transition:none}}