/* =====================================================================
   components.css — glass cards / buttons / inputs / badges / chips /
   list rows / ripple / skeleton / status pills / stars / empty state
   ===================================================================== */

/* ---------- Glass card with gradient hairline border ---------- */
.glass { position: relative; background: var(--glass); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .28), rgba(255, 61, 127, .25) 40%, rgba(139, 92, 246, .3) 70%, rgba(255, 255, 255, .06));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }
.card { padding: 14px; margin-bottom: 12px; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.card-title { font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 8px; letter-spacing: .2px; }
.card-title svg { width: 18px; height: 18px; color: var(--primary); }
.card-sub { font-size: 12px; color: var(--muted); white-space: nowrap; }
.sec-title { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 10px; }
.sec-title h2 { font-size: 16px; font-weight: 800; letter-spacing: .2px; display: flex; align-items: center; gap: 8px; }
.sec-title h2::before { content: ""; width: 3px; height: 16px; border-radius: 2px; background: var(--grad-brand); box-shadow: 0 0 12px rgba(255, 61, 127, .6); }
.sec-title a, .sec-title button { font-size: 12.5px; color: var(--muted); font-weight: 600; display: inline-flex; align-items: center; gap: 2px; }
.sec-title svg { width: 14px; height: 14px; }

/* ---------- Buttons ---------- */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; padding: 0 18px; border-radius: 12px; font-weight: 700; font-size: 14px; color: var(--text); background: var(--glass-2); border: 1px solid var(--line-2); transition: transform .18s var(--spring), box-shadow .25s, opacity .2s, background .2s; user-select: none; -webkit-user-select: none; white-space: nowrap; }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .55; pointer-events: none; }
.btn-primary { background: var(--grad-brand); border-color: transparent; box-shadow: 0 8px 24px rgba(255, 61, 127, .35), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn-primary:hover { box-shadow: 0 12px 32px rgba(255, 61, 127, .5), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn-gold { color: #241a00; background: var(--grad-gold); background-size: 200% auto; border-color: transparent; box-shadow: 0 8px 24px rgba(247, 201, 72, .3); animation: gold-shine 4s linear infinite; }
.btn-ghost { background: transparent; }
.btn-danger { background: rgba(239, 68, 68, .16); border-color: rgba(239, 68, 68, .4); color: #FCA5A5; }
.btn-ok { background: rgba(34, 197, 94, .18); border-color: rgba(34, 197, 94, .45); color: #86EFAC; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 9px; }
.btn-xs { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 8px; }
.btn-block { width: 100%; }
.btn-lg { height: 46px; font-size: 15px; border-radius: 14px; }
.btn .spin { width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }
.link { color: var(--primary); font-weight: 600; }

/* ---------- Ripple ---------- */
.ripple-host { position: relative; overflow: hidden; }
.ripple { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .45), rgba(255, 255, 255, .05) 70%); transform: scale(0); animation: ripple .65s ease-out forwards; pointer-events: none; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* ---------- Inputs ---------- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 6px; letter-spacing: .3px; }
.inp { width: 100%; height: 44px; padding: 0 12px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); color: var(--text); outline: none; transition: border-color .2s, box-shadow .2s, background .2s; -webkit-appearance: none; appearance: none; }
.inp::placeholder { color: var(--dim); }
.inp:focus { border-color: rgba(255, 61, 127, .7); box-shadow: 0 0 0 4px rgba(255, 61, 127, .15); background: rgba(255, 255, 255, .07); }
.inp.err { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(239, 68, 68, .15); }
textarea.inp { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
select.inp { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA0B4' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px; }
select.inp option { background: #171728; color: var(--text); }
.field-err { min-height: 0; font-size: 12px; color: #FCA5A5; margin-top: 5px; }
.field-err:empty { display: none; }
.inp-wrap { position: relative; }
.inp-wrap .inp { padding-right: 42px; }
.inp-wrap .inp-ic { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; color: var(--muted); border-radius: 10px; }
.inp-wrap .inp-ic svg { width: 18px; height: 18px; }
.inp-prefix { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-weight: 800; color: var(--gold); font-family: var(--font-num); font-size: 18px; }
.inp.with-prefix { padding-left: 36px; font-family: var(--font-num); font-size: 18px; font-weight: 700; }
.cap-row { display: flex; gap: 10px; }
.cap-row .inp { flex: 1; letter-spacing: 3px; text-transform: uppercase; font-family: var(--font-num); }
.cap-img { width: 120px; height: 48px; border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, .06); border: 1px solid var(--line-2); display: grid; place-items: center; font-size: 12px; color: var(--muted); cursor: pointer; flex: none; }
.cap-img svg { width: 100%; height: 100%; }
.hint { font-size: 12px; color: var(--muted); line-height: 1.55; }
.note-box { padding: 10px 12px; border-radius: 12px; background: rgba(247, 201, 72, .08); border: 1px solid rgba(247, 201, 72, .25); font-size: 12.5px; color: #FDE68A; line-height: 1.5; display: flex; gap: 8px; }
.note-box svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }

/* ---------- Badges / tags ---------- */
.badge-live { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px 0 5px; border-radius: 999px; background: rgba(10, 10, 20, .6); backdrop-filter: blur(8px); font-size: 10px; font-weight: 800; letter-spacing: 1px; color: #fff; border: 1px solid rgba(255, 255, 255, .15); }
.live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #FF4D4D; box-shadow: 0 0 8px #FF4D4D; animation: pulse-dot 1.2s ease-in-out infinite; }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid #FF4D4D; animation: ring-out 1.4s ease-out infinite; }
.verified { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #38BDF8, #2563EB); color: #fff; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .5), 0 0 14px rgba(56, 189, 248, .9); animation: breathe-verified 2.4s ease-in-out infinite; }
.verified svg { width: 12px; height: 12px; }
.verified.off { background: rgba(60, 60, 80, .8); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .2); animation: none; }
@keyframes breathe-verified { 0%, 100% { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .5), 0 0 10px rgba(56, 189, 248, .6); } 50% { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .8), 0 0 22px rgba(56, 189, 248, 1); } }
.vip-tag { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 7px; border-radius: 5px; font-size: 10px; font-weight: 900; letter-spacing: .6px; color: #2a1d00; background: linear-gradient(110deg, #C9952A 0%, #FFE38A 25%, #F7C948 50%, #FFF3B0 65%, #D9A72E 100%); background-size: 250% auto; animation: gold-shine 2.8s linear infinite; box-shadow: 0 2px 10px rgba(247, 201, 72, .45); text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.vip-tag svg { width: 11px; height: 11px; }
.vip-badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #fff; white-space: nowrap; background: var(--vip-c, #6B7190); box-shadow: 0 0 12px color-mix(in srgb, var(--vip-c, #6B7190) 60%, transparent); }
.tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 8px; background: rgba(255, 255, 255, .08); border: 1px solid var(--line); font-size: 11.5px; color: var(--muted); font-weight: 600; }
.tag svg, .vip-badge svg, .q-lbl svg, .hint svg { width: 12px; height: 12px; flex: none; }
.quota .q-lbl { display: inline-flex; align-items: center; gap: 6px; }
.pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.pill.pending { color: #FDE68A; background: rgba(245, 158, 11, .15); border: 1px solid rgba(245, 158, 11, .4); }
.pill.ok { color: #86EFAC; background: rgba(34, 197, 94, .15); border: 1px solid rgba(34, 197, 94, .4); }
.pill.bad { color: #FCA5A5; background: rgba(239, 68, 68, .15); border: 1px solid rgba(239, 68, 68, .4); }
.pill.info { color: #BAE6FD; background: rgba(56, 189, 248, .15); border: 1px solid rgba(56, 189, 248, .4); }

/* ---------- Stars ---------- */
.stars { display: inline-flex; gap: 2px; align-items: center; }
.stars i { width: 14px; height: 14px; display: inline-block; opacity: .25; background: currentColor; color: var(--gold); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.1 6.6 7.2.9-5.3 5 1.4 7.2L12 18.2 5.6 21.7 7 14.5 1.7 9.5l7.2-.9z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.1 6.6 7.2.9-5.3 5 1.4 7.2L12 18.2 5.6 21.7 7 14.5 1.7 9.5l7.2-.9z'/%3E%3C/svg%3E") center/contain no-repeat; }
.stars i.on { opacity: 1; animation: star-in .5s var(--spring) both; animation-delay: calc(var(--k, 0) * 90ms); filter: drop-shadow(0 0 4px rgba(247, 201, 72, .7)); }
.stars i.half { opacity: 1; background: linear-gradient(90deg, var(--gold) 50%, rgba(247, 201, 72, .25) 50%); }
.stars.lg i { width: 20px; height: 20px; }
.stars.sm i { width: 11px; height: 11px; }
.rating-num { font-family: var(--font-num); font-weight: 800; color: var(--gold); white-space: nowrap; }
.rating-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 2px; }
.rating-cnt { font-size: 12px; white-space: nowrap; }

/* ---------- List rows / menu ---------- */
.list-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); transition: background .2s; }
.list-row:last-child { border-bottom: 0; }
.list-row:active { background: rgba(255, 255, 255, .05); }
.lr-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(255, 61, 127, .2), rgba(139, 92, 246, .25)); color: var(--text); flex: none; }
.lr-ic svg { width: 17px; height: 17px; }
.lr-lbl { flex: 1; font-weight: 600; font-size: 14px; }
.lr-val { color: var(--muted); font-size: 13px; }
.lr-arr { width: 18px; height: 18px; color: var(--dim); }

/* ---------- Chips ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 34px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line-2); font-size: 13px; font-weight: 600; color: var(--muted); transition: all .2s; }
.chip.on { color: #fff; background: var(--grad-brand); border-color: transparent; box-shadow: 0 4px 14px rgba(255, 61, 127, .4); }

/* ---------- Skeleton ---------- */
.sk { position: relative; overflow: hidden; border-radius: 12px; background: rgba(255, 255, 255, .06); }
.sk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent); background-size: 600px 100%; animation: shimmer 1.4s linear infinite; }
.sk-line { height: 14px; margin: 10px 0; }
.sk-card { height: 120px; margin-bottom: 14px; border-radius: var(--r-lg); }
.sk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sk-grid .sk { aspect-ratio: 3 / 4; border-radius: var(--r); }
.sk-grid.wide .sk { aspect-ratio: 16 / 10; }
.sk-banner { aspect-ratio: 16 / 8; border-radius: var(--r-lg); margin-bottom: 14px; }

/* ---------- Empty / loading ---------- */
.empty { text-align: center; padding: 40px 16px; color: var(--muted); font-size: 14px; }
.empty .em-ic { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 20px; display: grid; place-items: center; background: var(--glass); color: var(--dim); animation: float-y 3s ease-in-out infinite; }
.empty .em-ic svg { width: 30px; height: 30px; }
.loader { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px; color: var(--muted); font-size: 12.5px; }
.loader .spin { width: 18px; height: 18px; border: 2px solid var(--line-2); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
.end-mark { text-align: center; padding: 16px; color: var(--dim); font-size: 12px; letter-spacing: 1px; }
.end-mark::before, .end-mark::after { content: "· · ·"; margin: 0 8px; }