.loyalty-drops { max-width:1200px; }
.drops-hero { display:flex; justify-content:space-between; align-items:center; gap:25px; padding:35px 40px; border:1px solid #b5516245; border-radius:15px; background:radial-gradient(ellipse at right,#a62a4733,transparent 65%),linear-gradient(120deg,#25151e,#11151f); }
.drops-eyebrow { color:#e3a09d; font-size:.63rem; letter-spacing:1.7px; }.drops-hero h2 { font-family:var(--font-title); color:#f3dfc5; font-size:clamp(1.8rem,3vw,2.6rem); line-height:1.4; margin:14px 0; }.drops-hero em { color:#e8ba79; font-style:normal; }.drops-hero p { color:#c6b6c5; font-size:.9rem; }
.drops-emblem { display:flex; flex-direction:column; align-items:center; gap:20px; color:#e7b889; padding:30px; border:1px solid #c58d6350; border-radius:50% 50% 16px 16px; flex-shrink:0; background:#ae324310; }.drops-emblem i { font-size:3rem; color:#ed929c; }.drops-emblem span { font-size:.56rem; letter-spacing:2px; }
.drops-demo { display:flex; gap:12px; flex-wrap:wrap; color:#ebba86; font-size:.63rem; margin:18px 0 25px; letter-spacing:.7px; }.drops-demo span { color:#b9a9bf; letter-spacing:0; font-size:.75rem; }
.drops-overview { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:23px; }.drops-overview>div { padding:19px 24px; border:1px solid #c49a6433; border-left:2px solid #b94d65; border-radius:8px; background:#17151f; }.drops-overview span { display:block; color:#c5abbc; font-size:.73rem; }.drops-overview strong { display:block; margin-top:9px; color:#efc88d; font-size:1.6rem; font-weight:500; font-variant-numeric:tabular-nums; }
.drops-filters { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; padding:23px; border:1px solid #b2686540; border-radius:11px; background:#12151f; }.drops-filters label { display:flex; flex-direction:column; gap:8px; color:#c8b0c1; font-size:.7rem; }.drops-filters label[hidden] { display:none; }.drops-filters .drops-query { grid-column:span 2; }
.drops-filters input,.drops-filters select { width:100%; min-width:0; height:43px; border:1px solid #bd986144; border-radius:6px; padding:0 12px; font:inherit; font-size:.78rem; background:#0b0f18; color:#e7dbe5; color-scheme:dark; }
.drops-actions { display:flex; align-items:end; gap:9px; }.loyalty-drops button { font:inherit; font-size:.75rem; color:#e7c8a0; background:#291b24; border:1px solid #bb6c6759; border-radius:6px; padding:12px 16px; cursor:pointer; transition:background .2s,border-color .2s; }.loyalty-drops button:hover:not(:disabled) { background:#63263766; border-color:#d2867a; }.loyalty-drops .drops-primary { background:linear-gradient(110deg,#792439,#4a2231); color:#ffe2c4; }.loyalty-drops button:disabled { opacity:.4; cursor:default; }
.drops-list-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:32px 0 8px; }.drops-list-heading h3 { color:#f0d9b6; font-family:var(--font-ui); font-size:1.25rem; margin-bottom:9px; }.drops-list-heading p { color:#b8a6bc; font-size:.73rem; line-height:1.8; }.drops-list-heading button { flex-shrink:0; }.drops-list-heading i { margin-right:7px; }
.drops-status { font-size:.7rem; color:#bda1b5; padding:10px 0 15px; }.drops-feed { display:grid; gap:10px; }
.loyalty-drop { display:grid; grid-template-columns:48px minmax(0,1.5fr) minmax(0,1fr) auto; align-items:center; gap:20px; padding:21px; border:1px solid #9f6b6338; border-radius:9px; background:linear-gradient(110deg,#25151e88,#11151e); transition:border-color .2s; }.loyalty-drop:hover { border-color:#d08d775e; }.loyalty-drop.is-extender { background:linear-gradient(110deg,#48321a36,#15131d); border-color:#c9a16a45; }
.drop-symbol { width:46px; height:50px; display:grid; place-items:center; border:1px solid #be68726b; border-radius:10px; color:#ed9fa7; background:linear-gradient(135deg,#a73b4b2a,#37232b); font-size:1.25rem; }.is-extender .drop-symbol { color:#f1ca8b; border-color:#c9a16a7a; background:linear-gradient(135deg,#b2873a2a,#2a2120); }
.drop-kind { font-size:.52rem; color:#bc8b97; letter-spacing:1px; }.drop-item h3 { font-family:var(--font-ui); color:#eed5b6; font-size:.95rem; margin:7px 0 10px; line-height:1.5; }.drop-tags { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }.drop-tags>span { color:#c8b4c6; border:1px solid #ab7f6430; border-radius:4px; padding:4px 7px; font-size:.6rem; }.drop-tags .drop-craft { color:#f3adad; border-color:#d3536544; background:#b34c5d0c; }.drop-tags .drop-grade { color:#ebc286; border-color:#c39b5b55; }
.drop-slots { display:flex; align-items:center; gap:4px; }.drop-slots b { color:#efc686; font-size:.9rem; }.drop-slots small { color:#bdadbe; font-size:.53rem; margin-left:3px; }
.drop-context { display:flex; flex-direction:column; gap:6px; min-width:0; }.drop-context strong { color:#e2cedc; font-size:.8rem; font-weight:500; overflow-wrap:anywhere; }.drop-context span { color:#b8a7bf; font-size:.72rem; line-height:1.6; }.drop-context small { color:#cd9b9d; font-size:.63rem; }.drop-time { color:#aa93ae; font-size:.68rem; white-space:nowrap; }
.drops-empty { text-align:center; border:1px solid #ab5d6633; border-radius:9px; padding:45px 20px; font-size:.88rem; color:#cab6cb; background:#17141e; }
.drops-paging { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:15px; margin-top:22px; color:#a995b1; font-size:.7rem; }.drops-paging>div { display:flex; align-items:center; gap:14px; }.drops-paging button { padding:8px 13px; }
.loyalty-drops :is(button,input,select):focus-visible { outline:2px solid #f0a6a4; outline-offset:3px; }
@media(max-width:850px) { .drops-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }.loyalty-drop { grid-template-columns:42px minmax(0,1fr) minmax(0,.8fr); gap:15px; }.drop-time { grid-column:2/-1; }.drop-symbol { width:42px; height:46px; } }
@media(max-width:550px) { .drops-hero { padding:25px; }.drops-emblem { display:none; }.drops-overview { gap:7px; }.drops-overview>div { padding:14px 10px; }.drops-overview span { font-size:.64rem; line-height:1.6; }.drops-filters { padding:17px; }.drops-list-heading { align-items:start; }.drops-list-heading button { padding:10px; }.loyalty-drop { grid-template-columns:42px minmax(0,1fr); padding:17px; }.drop-context { grid-column:2; }.drop-time { grid-column:2; }.drop-item h3 { font-size:.87rem; } }
@media(prefers-reduced-motion:reduce) { .loyalty-drops * { transition:none!important; animation:none!important; } }