.ecard-widget, .ecard-widget * { box-sizing: border-box; }
.ecard-widget { font-family: "Avenir Next", "Helvetica Neue", "PingFang TC", "Microsoft JhengHei", sans-serif; }
.ecard-toggle { position: fixed; top: 20px; right: 22px; z-index: 2100; display: grid; grid-template-columns: 30px auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; min-width: 126px; padding: 8px 12px 8px 8px; border: 1px solid rgba(255,255,255,.28); border-radius: 3px; color: #fff; background: rgba(22,22,24,.9); box-shadow: 0 8px 26px rgba(0,0,0,.2); cursor: pointer; text-align: left; backdrop-filter: blur(12px); transition: transform .25s ease, background .25s ease, border-color .25s ease; }
.ecard-toggle:hover { border-color: #e07825; background: rgba(22,22,24,.98); transform: translateY(-2px); }
.ecard-toggle__qr { position: relative; grid-row: 1 / span 2; display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid rgba(255,255,255,.7); background: repeating-linear-gradient(45deg, #fff 0 2px, #bf4b89 2px 4px, #0ba5c9 4px 6px); }
.ecard-toggle__qr::after { width: 7px; height: 7px; border: 2px solid #fff; background: #e07825; content: ""; box-shadow: -8px -8px 0 -2px #fff, 8px 8px 0 -2px #fff; }
.ecard-toggle strong { font-size: .65rem; letter-spacing: .16em; }
.ecard-toggle small { color: #dca67e; font-size: .58rem; letter-spacing: .06em; }
.ecard-backdrop { position: fixed; inset: 0; z-index: 2090; display: flex; justify-content: flex-end; align-items: flex-start; padding: 76px 22px 22px; background: rgba(16,16,18,.58); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; }
.ecard-widget.is-open .ecard-backdrop { opacity: 1; visibility: visible; }
.ecard-panel { position: relative; width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 98px); overflow: auto; padding: 16px; color: #232226; background: #eee8dd; box-shadow: 16px 16px 0 rgba(0,0,0,.18); transform: translateY(-12px); transition: transform .3s ease; }
.ecard-widget.is-open .ecard-panel { transform: translateY(0); }
.ecard-close { position: absolute; top: 9px; right: 10px; z-index: 2; width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.55); color: #fff; background: rgba(0,0,0,.32); cursor: pointer; font-size: 1rem; line-height: 1; }
.ecard-card { position: relative; display: grid; grid-template-columns: 34% 66%; min-height: 270px; overflow: hidden; color: #f8f4eb; background: #292929; }
.ecard-card::before { position: absolute; top: -25%; left: 39%; width: 9px; height: 160%; background: #f1701b; content: ""; transform: rotate(25deg); transform-origin: center; }
.ecard-card::after { position: absolute; right: -8%; bottom: -15%; width: 55%; height: 70%; border: 1px solid rgba(241,112,27,.5); border-radius: 50%; content: ""; transform: rotate(-18deg); }
.ecard-card__rail, .ecard-card__main { position: relative; z-index: 1; }
.ecard-card__rail { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 18px 10px 16px; background: linear-gradient(140deg, #313131, #202020); text-align: center; }
.ecard-brand { color: #f1701b; font-family: Georgia, serif; font-size: 1.03rem; font-style: italic; line-height: 1.1; }
.ecard-brand strong { display: block; margin-top: 4px; font-family: "Arial Narrow", sans-serif; font-size: 1.18rem; letter-spacing: .1em; }
.ecard-mark { display: grid; width: 88px; height: 66px; place-items: center; overflow: hidden; border: 1px solid rgba(241,112,27,.5); background: radial-gradient(circle at 30% 40%, #8c9c8f 0 8%, transparent 9%), linear-gradient(135deg, #1e3034, #bd9a72 52%, #25323a); color: rgba(255,255,255,.76); font-size: .54rem; letter-spacing: .12em; }
.ecard-qr { width: 94px; height: 94px; padding: 5px; background: #fff; image-rendering: pixelated; }
.ecard-qr-label { color: #f1701b; font-size: .48rem; font-weight: 800; letter-spacing: .15em; }
.ecard-card__main { padding: 46px 22px 20px 30px; }
.ecard-card__main h2 { margin: 0; color: #fff; font-family: "Arial Narrow", "Helvetica Neue", sans-serif; font-size: clamp(1.7rem, 4vw, 2.65rem); font-weight: 800; letter-spacing: .02em; line-height: .95; }
.ecard-title { margin: 10px 0 22px; color: #f7eee6; font-size: .7rem; letter-spacing: .28em; }
.ecard-details { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; color: #f3eee5; font-size: .77rem; line-height: 1.35; }
.ecard-details li { display: flex; gap: 9px; align-items: start; }
.ecard-details b { min-width: 16px; color: #f1701b; font-size: .82rem; }
.ecard-details a { color: inherit; text-decoration: none; }
.ecard-details a:hover { color: #f7b07f; }
.ecard-caption { margin: 16px 0 0; color: #e07825; font-family: Georgia, serif; font-size: .66rem; font-style: italic; }
.ecard-panel__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.ecard-action { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; border: 1px solid rgba(25,25,28,.25); padding: 7px 11px; color: #433a36; background: transparent; cursor: pointer; font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-decoration: none; }
.ecard-action--primary { border-color: #743d49; color: #fff; background: #743d49; }
.ecard-action:hover { border-color: #e07825; }
.ecard-status { min-height: 1.1em; margin: 9px 0 0; color: #743d49; font-size: .65rem; }
.ecard-note { margin: 12px 0 0; color: #77716a; font-size: .62rem; line-height: 1.6; }
@media (max-width: 620px) { .ecard-toggle { top: 12px; right: 12px; min-width: 108px; padding: 7px 9px 7px 7px; } .ecard-backdrop { align-items: flex-start; padding: 62px 10px 10px; } .ecard-panel { width: calc(100vw - 20px); padding: 10px; } .ecard-card { grid-template-columns: 35% 65%; min-height: 250px; } .ecard-card__main { padding: 38px 13px 15px 22px; } .ecard-card__main h2 { font-size: 1.5rem; } .ecard-title { margin: 8px 0 15px; font-size: .57rem; letter-spacing: .18em; } .ecard-details { gap: 6px; font-size: .64rem; } .ecard-mark { width: 70px; height: 52px; } .ecard-qr { width: 76px; height: 76px; } }
@media (prefers-reduced-motion: reduce) { .ecard-toggle, .ecard-panel, .ecard-backdrop { transition: none; } }