:root { --bg: #0e1621; --panel: #17212b; --text: #fff; --blue: #5eb5f7; }
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Roboto', sans-serif; }
body { background: var(--bg); color: var(--text); display: flex; justify-content: center; height: 100vh; overflow-y: auto; }
#app { width: 100%; max-width: 900px; padding: 20px; }

.top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.title { font-size: 22px; font-weight: bold; }
.gifts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 10px; }

/* Карточка */
.gift-card { border-radius: 12px; padding: 10px 5px; text-align: center; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.05); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); }
.gift-icon { font-size: 45px; margin-bottom: 5px; }
.gift-name { font-size: 11px; font-weight: 500; margin-bottom: 2px; text-shadow: 0 1px 2px rgba(0,0,0,0.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.gift-model { font-size: 9px; color: #a0b0c0; text-transform: uppercase; margin-bottom: 2px; }
.gift-price { font-size: 10px; color: #ffd700; font-weight: bold; }

/* Редкости */
.rarity-badge { position: absolute; top: 5px; right: 5px; background: rgba(0,0,0,0.6); padding: 1px 4px; border-radius: 4px; font-size: 7px; font-weight: bold; text-transform: uppercase; }
.rarity-legendary { color: #ffd700; border: 1px solid #ffd700; }
.rarity-rare { color: #5eb5f7; border: 1px solid #5eb5f7; }
.rarity-common { color: #b0c4de; border: 1px solid #b0c4de; }
.rarity-unique { color: #ff4500; border: 1px solid #ff4500; }

/* Эффекты моделей */
.model-standard { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.model-gold { filter: sepia(1) saturate(4) hue-rotate(-15deg) brightness(1.3) drop-shadow(0 0 8px rgba(255, 215, 0, 0.8)); }
.model-chrome { filter: grayscale(1) brightness(1.6) contrast(1.3) drop-shadow(0 0 6px rgba(192, 192, 192, 0.6)); }
.model-wood { filter: sepia(0.7) hue-rotate(-25deg) saturate(0.8) brightness(0.8) drop-shadow(0 2px 4px rgba(0,0,0,0.8)); }
.model-crystal { filter: hue-rotate(180deg) saturate(2) brightness(1.4) drop-shadow(0 0 10px rgba(0, 255, 255, 0.8)); }
.model-neon { filter: hue-rotate(90deg) saturate(4) drop-shadow(0 0 12px #00ffcc); }
.model-inferno { filter: saturate(3) hue-rotate(-30deg) drop-shadow(0 0 10px #ff4500); }
.model-rainbow { filter: hue-rotate(200deg) saturate(3) drop-shadow(0 0 12px #ff00cc); }
.model-emerald { filter: hue-rotate(90deg) saturate(3) brightness(1.2) drop-shadow(0 0 10px #00d26a); }
.model-ruby { filter: hue-rotate(-30deg) saturate(4) brightness(1.1) drop-shadow(0 0 10px #e0115f); }
.model-amber { filter: sepia(0.8) saturate(3) hue-rotate(-10deg) brightness(1.1) drop-shadow(0 0 8px #ffbf00); }
.model-platinum { filter: grayscale(0.8) brightness(1.4) contrast(1.2) drop-shadow(0 0 8px rgba(255, 255, 255, 0.7)); }
.model-ghost { filter: grayscale(1) opacity(0.8) drop-shadow(0 0 8px rgba(255, 255, 255, 0.9)); }
.model-ice { filter: hue-rotate(180deg) saturate(2) brightness(1.3) drop-shadow(0 0 10px #00bfff); }
.model-lava { filter: saturate(3) hue-rotate(-30deg) drop-shadow(0 0 15px #ff4500); }
.model-diamond { filter: hue-rotate(200deg) saturate(1.5) brightness(1.5) contrast(1.2) drop-shadow(0 0 12px rgba(0, 255, 255, 0.8)); }
.model-turquoise { filter: hue-rotate(140deg) saturate(3) drop-shadow(0 0 10px #00ced1); }
.model-obsidian { filter: grayscale(1) brightness(0.4) contrast(2) drop-shadow(0 0 8px rgba(0,0,0,1)); }
.model-leather { filter: sepia(0.9) hue-rotate(-15deg) saturate(1.5) brightness(0.6) drop-shadow(0 2px 6px rgba(0,0,0,0.9)); }

/* Официальные фоны */
.bg-onyx { background: radial-gradient(circle, #353637 0%, #000000 100%); }
.bg-old-gold { background: radial-gradient(circle, #cf9832 0%, #be7f31 100%); }
.bg-sapphire { background: radial-gradient(circle, #5cb0ca 0%, #4b96b4 100%); }
.bg-mexican-pink { background: radial-gradient(circle, #e4007c 0%, #b0005f 100%); }
.bg-rifle-green { background: radial-gradient(circle, #506341 0%, #354d34 100%); }
.bg-french-violet { background: radial-gradient(circle, #8806ce 0%, #5e0490 100%); }
.bg-fire-engine { background: radial-gradient(circle, #ce2029 0%, #9e1820 100%); }
.bg-deep-cyan { background: radial-gradient(circle, #30b4a9 0%, #209e9e 100%); }
.bg-seal-brown { background: radial-gradient(circle, #a35440 0%, #7e3e2f 100%); }
.bg-gunmetal { background: radial-gradient(circle, #8b8b84 0%, #75756e 100%); }
.bg-cosmos { background: radial-gradient(circle, #0f0c29 0%, #302b63 50%, #24243e 100%); }
.bg-blood-moon { background: radial-gradient(circle, #870000 0%, #190a05 100%); }
.bg-frozen { background: radial-gradient(circle, #e0f7fa 0%, #80deea 100%); }
.bg-sunset { background: linear-gradient(45deg, #ff7e5f, #feb47b); }
.bg-ocean-depth { background: radial-gradient(circle, #001f3f 0%, #000000 100%); }
.bg-mystic { background: radial-gradient(circle, #4a00e0 0%, #8e2de2 100%); }
.bg-emerald { background: radial-gradient(circle, #77c585 0%, #51ab76 100%); }
.bg-carmine { background: radial-gradient(circle, #df574a 0%, #b94240 100%); }
.bg-tomato { background: radial-gradient(circle, #ff6347 0%, #8c2e1e 100%); }
.bg-mustard { background: radial-gradient(circle, #ffdb58 0%, #8c7520 100%); }
.bg-dark-green { background: radial-gradient(circle, #006400 0%, #002e00 100%); }
.bg-burnt-sienna { background: radial-gradient(circle, #e97451 0%, #7a3622 100%); }
.bg-gunship-green { background: radial-gradient(circle, #555d50 0%, #292e26 100%); }
.bg-celtic-blue { background: radial-gradient(circle, #45b7ed 0%, #3b93df 100%); }
.bg-feldgrau { background: radial-gradient(circle, #4d5d53 0%, #2b332e 100%); }
.bg-ranger-green { background: radial-gradient(circle, #4b5320 0%, #242911 100%); }
.bg-camo-green { background: radial-gradient(circle, #78866b 0%, #3a4233 100%); }
.bg-tactical-pine { background: radial-gradient(circle, #1e3a2b 0%, #0d1a13 100%); }
.bg-marine-blue { background: radial-gradient(circle, #4b96b4 0%, #234b5a 100%); }
.bg-galaxy { background: radial-gradient(circle, #000000 0%, #434343 100%); }
.bg-platinum { background: radial-gradient(circle, #e5e4e2 0%, #b3b2b0 100%); }
.bg-ash-grey { background: radial-gradient(circle, #4a4a4a 0%, #2b2b2b 100%); }
.bg-lavender { background: radial-gradient(circle, #a689c7 0%, #7f5d99 100%); }
.bg-indigo { background: radial-gradient(circle, #4b0082 0%, #2e0052 100%); }
.bg-magenta { background: radial-gradient(circle, #ff00ff 0%, #b300b3 100%); }
.bg-chocolate { background: radial-gradient(circle, #5c3a21 0%, #3b2515 100%); }
.bg-neon-blue { background: radial-gradient(circle, #00f2fe 0%, #4facfe 100%); }
.bg-gold-dust { background: radial-gradient(circle, #f7e3a1 0%, #b88d2f 100%); }
.bg-royal-blue { background: radial-gradient(circle, #4169e1 0%, #2b4ab5 100%); }
.bg-forest { background: radial-gradient(circle, #228b22 0%, #145214 100%); }
.bg-copper { background: radial-gradient(circle, #b87333 0%, #804f24 100%); }
.bg-teal { background: radial-gradient(circle, #008080 0%, #004d4d 100%); }
.bg-aquamarine { background: radial-gradient(circle, #7fffd4 0%, #40c7a0 100%); }
.bg-burgundy { background: radial-gradient(circle, #800020 0%, #4d0013 100%); }