.kcard{--w:240px;width:var(--w);max-width:100%;aspect-ratio:5/7;position:relative;container-type:inline-size;perspective:1100px;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.kcard.flippable{cursor:pointer}
.kc-tilt{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s ease-out}
.kcard.moving .kc-tilt{transition:none}
.kc-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,1.25,.5,1)}
.kcard.flipped .kc-in{transform:rotateY(180deg)}
.kc-face{position:absolute;inset:0;border-radius:6.4cqw;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 4cqw 9cqw -4cqw rgba(0,0,0,.7)}
.kc-back{transform:rotateY(180deg)}
.kc-front,.kc-back{padding:3.2cqw;background:var(--fr)}
.kc-body{position:relative;height:100%;border-radius:4cqw;overflow:hidden;background:#0d1326}
.kc-art{position:absolute;inset:0;background:linear-gradient(160deg,color-mix(in srgb,var(--cc) 75%,#1a2448),#0d1326)}
.kc-art img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.kc-ph{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.28)}
.kc-ph svg{width:58%;margin-top:8%}
.kc-scrim{position:absolute;left:0;right:0;bottom:0;height:44%;background:linear-gradient(to top,rgba(5,9,22,.96),rgba(5,9,22,.6) 55%,transparent)}
.kc-tier{position:absolute;top:3.4cqw;left:3.4cqw;padding:1cqw 3cqw;border-radius:99px;font-size:3.4cqw;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--tc);background:rgba(5,9,22,.72);border:.3cqw solid var(--ac);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.kc-no{position:absolute;top:4.2cqw;right:4cqw;font-size:3.3cqw;font-weight:800;color:rgba(255,255,255,.8);text-shadow:0 1px 3px rgba(0,0,0,.8);letter-spacing:.04em}
.kc-plate{position:absolute;left:0;right:0;bottom:0;padding:0 5.2cqw 5.4cqw;color:#fff;display:flex;flex-direction:column;gap:1.6cqw}
.kc-plate b{font-family:var(--display);font-size:7.6cqw;line-height:1.05;letter-spacing:-.01em;text-shadow:0 2px 8px rgba(0,0,0,.7);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.kc-plate small{display:flex;align-items:center;gap:2cqw;font-size:3.6cqw;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.kc-plate small i,.kc-chip i{flex:none;width:2.8cqw;height:2.8cqw;border-radius:50%;background:var(--cc);box-shadow:0 0 0 .4cqw rgba(255,255,255,.55)}
.kc-glare{position:absolute;inset:0;pointer-events:none;border-radius:inherit}
.kc-glare.outer{border-radius:6.4cqw}

.kc-bk{position:relative;height:100%;border-radius:4cqw;overflow:hidden;background:radial-gradient(120% 70% at 50% 0%,#1b2a5c,#0a1026 70%);color:#fff;padding:5.4cqw 5.4cqw 4.6cqw;display:flex;flex-direction:column;gap:3cqw}
.kc-bk header{display:flex;align-items:center;justify-content:space-between;gap:2cqw}
.kc-chip{display:inline-flex;align-items:center;gap:2cqw;max-width:62%;font-size:3.3cqw;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#E3EAF8;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.kc-bt{font-size:3.2cqw;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--tc)}
.kc-bk h4{margin:0;font-family:var(--display);font-size:7cqw;line-height:1.1;overflow-wrap:anywhere}
.kc-bk p{margin:0;flex:1;min-height:0;overflow:auto;font-size:4.1cqw;line-height:1.55;color:#cdd7f0;scrollbar-width:none}
.kc-bk p::-webkit-scrollbar{display:none}
.kc-bk p em{opacity:.6}
.kc-bk footer{display:flex;justify-content:space-between;font-size:3cqw;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);border-top:1px solid rgba(255,255,255,.12);padding-top:2.6cqw}

.t-bronze{--fr:linear-gradient(135deg,#f6c293 0%,#b8692c 32%,#7a3f14 55%,#e0a05c 100%);--ac:#E8A465;--tc:#F5BE8B}
.t-silver{--fr:linear-gradient(135deg,#ffffff 0%,#aab4c6 32%,#6f7a90 55%,#eef2f8 100%);--ac:#DCE3EF;--tc:#E6ECF6}
.t-gold{--fr:linear-gradient(135deg,#fff6bb 0%,#ecbd3c 32%,#a27208 55%,#ffe58a 100%);--ac:#F7D25F;--tc:#FFE08A}
.t-diamond{--fr:linear-gradient(135deg,#eafcff 0%,#66d4f6 30%,#3573e0 55%,#baf2ff 100%);--ac:#8FE3FF;--tc:#A9EBFF}
.t-holo{--fr:linear-gradient(115deg,#ff6ad5,#ffd36e,#7dffb2,#6ec9ff,#c58bff,#ff6ad5);--ac:#fff;--tc:#fff}
.t-holo .kc-front,.t-holo .kc-back{background-size:320% 320%;animation:holoFr 7s linear infinite}
@keyframes holoFr{to{background-position:320% 320%}}

.kcard{--mx:30%;--my:22%}
.kc-glare{background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.5) 0,rgba(255,255,255,.16) 26%,transparent 52%),radial-gradient(circle at calc(100% - var(--mx)) calc(100% - var(--my)),rgba(255,255,255,.1) 0,transparent 42%);opacity:.55;transition:opacity .3s}
.kcard:hover .kc-glare{opacity:1}
.t-gold .kc-glare{background:radial-gradient(circle at var(--mx) var(--my),rgba(255,230,130,.62) 0,rgba(255,215,110,.2) 28%,transparent 54%),radial-gradient(circle at calc(100% - var(--mx)) calc(100% - var(--my)),rgba(255,235,160,.14) 0,transparent 42%)}
.t-diamond .kc-glare{background:radial-gradient(circle at 18% 22%,#fff 0 .35cqw,transparent .8cqw),radial-gradient(circle at 78% 36%,#fff 0 .3cqw,transparent .7cqw),radial-gradient(circle at 40% 70%,#fff 0 .35cqw,transparent .8cqw),radial-gradient(circle at 88% 82%,#fff 0 .3cqw,transparent .7cqw),radial-gradient(circle at var(--mx) var(--my),rgba(170,238,255,.7) 0,rgba(160,235,255,.2) 28%,transparent 54%),radial-gradient(circle at calc(100% - var(--mx)) calc(100% - var(--my)),rgba(190,240,255,.14) 0,transparent 42%);opacity:.8;animation:twinkle 3.4s ease-in-out infinite}
@keyframes twinkle{50%{filter:brightness(1.3)}}
.t-holo .kc-glare{background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.2) 0,rgba(255,255,255,.04) 26%,transparent 48%),conic-gradient(from 20deg at var(--mx) var(--my),rgba(255,95,210,.28),rgba(255,211,110,.28),rgba(125,255,178,.28),rgba(95,200,255,.28),rgba(185,139,255,.28),rgba(255,95,210,.28));opacity:.8;-webkit-mask-image:radial-gradient(circle at var(--mx) var(--my),#000 0,rgba(0,0,0,.6) 34%,rgba(0,0,0,.12) 80%);mask-image:radial-gradient(circle at var(--mx) var(--my),#000 0,rgba(0,0,0,.6) 34%,rgba(0,0,0,.12) 80%)}
.kcard.t-holo:hover .kc-glare{opacity:1}
.t-holo .kc-art::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);pointer-events:none}

/* ---------- admin: cards page ---------- */
.kp-tabs{margin:14px 0 18px;max-width:560px}
.kp-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.kf{display:grid;gap:12px;padding:18px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.kf label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:.88rem;position:relative}
.kf input[type=text],.kf textarea,.kf select{font:inherit;font-weight:500;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);outline:none}
.kf input:focus,.kf textarea:focus,.kf select:focus{border-color:var(--navy)}
.kf textarea{resize:vertical;min-height:110px}
.kf-count{position:absolute;right:10px;bottom:8px;font-size:.72rem;color:var(--muted);font-weight:600}
.kf .err{margin:0;color:var(--danger);font-weight:600;font-size:.86rem}
.kf .err:empty{display:none}
.kf-img{display:grid;gap:8px;padding:12px;border-radius:12px;border:1.5px dashed var(--line);background:var(--bg)}
.kf-img-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kf-img small{color:var(--muted);font-size:.78rem;font-weight:500}
.kf-pos{display:inline-flex;gap:3px;padding:3px;border-radius:10px;background:var(--surface);border:1px solid var(--line)}
.kf-pos button{border:0;border-radius:7px;padding:5px 10px;background:none;color:var(--muted);font:inherit;font-weight:700;font-size:.8rem;cursor:pointer}
.kf-pos button.on{background:var(--navy);color:#fff}
.kf-act{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.kp-prev{position:sticky;top:78px;display:grid;justify-items:center;gap:12px;padding:18px;border-radius:16px;background:linear-gradient(160deg,#1b2a4a,#0b1328);color:#fff}
.kp-prev>small{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.kp-prev .hint{margin:0;font-size:.78rem;opacity:.65;text-align:center}
.kp-tiers{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.kp-tiers button{border:0;border-radius:999px;padding:5px 11px;background:rgba(255,255,255,.1);color:#fff;font:inherit;font-weight:700;font-size:.76rem;cursor:pointer}
.kp-tiers button.on{background:#fff;color:#0B2150}
.kl-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:26px 0 12px}
.kl-head h3{margin:0;font-family:var(--display)}
.kl-head .grow{flex:1}
.kl-head select{font:inherit;font-weight:600;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.kl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:22px 16px}
.kl-item{display:grid;justify-items:center;gap:8px;padding:12px 8px 10px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.kl-item.editing{border-color:var(--navy);box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 18%,transparent)}
.kl-info{text-align:center;min-width:0;max-width:100%}
.kl-info b{display:block;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kl-info small{color:var(--muted);font-size:.76rem}
.kl-acts{display:flex;gap:6px}
.kp-empty{padding:30px;text-align:center;color:var(--muted);border:1.5px dashed var(--line);border-radius:16px}
.kc-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.kc-row .sw{flex:none;width:22px;height:22px;border-radius:7px;background:var(--c)}
.kc-row .nm{flex:1;min-width:0}
.kc-row .nm b{display:block}
.kc-row .nm small{color:var(--muted)}
.kc-row input[type=text]{flex:1;min-width:0;font:inherit;padding:8px 10px;border-radius:9px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.kc-list{display:grid;gap:8px;margin-top:12px}
.kc-colors{display:flex;flex-wrap:wrap;gap:6px}
.kc-colors button{width:28px;height:28px;border-radius:9px;border:2px solid transparent;background:var(--c);cursor:pointer;padding:0;transition:transform .15s}
.kc-colors button:hover{transform:scale(1.12)}
.kc-colors button.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--surface) inset}
.kc-add{display:grid;gap:10px;padding:16px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.kc-add .r{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.kc-add input[type=text]{flex:1;min-width:180px;font:inherit;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.od{display:grid;gap:10px;max-width:720px}
.od-row{display:grid;grid-template-columns:110px minmax(0,1fr) 92px;gap:14px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.od-tier{display:inline-flex;align-items:center;gap:8px;font-weight:800}
.od-tier i{width:18px;height:18px;border-radius:6px;background:var(--g)}
.od-row input[type=range]{width:100%;accent-color:var(--navy)}
.od-num{display:flex;align-items:center;gap:4px}
.od-num input{width:100%;font:inherit;font-weight:700;padding:7px 8px;border-radius:9px;border:1px solid var(--line);background:var(--bg);color:var(--ink);text-align:right}
.od-bar{display:flex;height:14px;border-radius:999px;overflow:hidden;background:var(--line)}
.od-bar i{display:block;background:var(--g);min-width:0;transition:flex-basis .2s}
.od-total{display:flex;align-items:center;gap:10px;font-weight:800}
.od-total.ok b{color:#1E8A4C}
.od-total.bad b{color:#C22E48}
.od-exp{margin:0;color:var(--muted);font-size:.86rem}
@media (max-width:900px){.kp-grid{grid-template-columns:1fr}.kp-prev{position:static}.od-row{grid-template-columns:90px minmax(0,1fr) 84px;gap:8px}}
.kc-glare{z-index:1}
.kc-tier,.kc-no,.kc-plate{z-index:2}
.kc-chip{font-size:3cqw!important;letter-spacing:.04em!important}