:root{--bg:#0f1117;--bg-card:#1a1d2e;--bg-card-hover:#222640;--bg-input:#141726;--border:#2a2d42;--border-focus:#7c5cfc;--text:#a0a4b8;--text-h:#e8eaf0;--text-muted:#5a5e72;--accent:#7c5cfc;--accent-glow:#7c5cfc4d;--gold:#fbbf24;--gold-glow:#fbbf2440;--green:#34d399;--red:#f87171;--tag-normal:#6366f1;--tag-first:#f59e0b;--tag-event:#ec4899;--tag-newbie:#34d399;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;margin:0}#root{max-width:720px;margin:0 auto;padding:0 16px}input,select,button{font-family:inherit;font-size:inherit}.app{padding:12px 0 32px}.app-header{text-align:center;margin-bottom:16px}.app-header h1{color:var(--text-h);margin-bottom:2px;font-size:22px;font-weight:700}.app-header p{color:var(--text-muted);font-size:13px}.app-main{flex-direction:column;gap:20px;display:flex}.pack-form{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:14px 16px}.pack-form-previewing{border-color:var(--accent);box-shadow:0 0 12px #7c5cfc33}.form-title-row{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.pack-form h2{color:var(--text-h);font-size:15px;font-weight:600}.form-preview-badge{color:var(--accent);background:#7c5cfc1f;border-radius:4px;padding:2px 10px;font-size:12px;font-weight:600;animation:2s ease-in-out infinite badge-pulse}@keyframes badge-pulse{0%,to{opacity:1}50%{opacity:.6}}.form-grid{grid-template-columns:1fr 1fr 1fr;gap:8px;display:grid}.form-field{flex-direction:column;gap:2px;display:flex}.form-field label{color:var(--text-muted);font-size:11px;font-weight:500}.form-field input,.form-field select{background:var(--bg-input);border:1px solid var(--border);color:var(--text-h);border-radius:6px;outline:none;padding:5px 8px;font-size:13px;transition:border-color .2s}.form-field input:focus,.form-field select:focus{border-color:var(--border-focus);box-shadow:0 0 0 2px var(--accent-glow)}.form-field input::placeholder{color:var(--text-muted)}.form-field input:disabled{opacity:.35;cursor:not-allowed}.form-actions{gap:8px;margin-top:10px;display:flex}.btn-primary{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:6px;padding:5px 20px;font-size:13px;font-weight:600;transition:opacity .2s}.btn-primary:hover{opacity:.85}.btn-secondary{color:var(--text);border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:6px;padding:5px 20px;font-size:13px;transition:border-color .2s}.btn-secondary:hover{border-color:var(--text-muted)}.pack-list h2{color:var(--text-h);margin-bottom:8px;font-size:15px;font-weight:600}.list-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;display:flex}.filter-group{flex-wrap:wrap;gap:4px;display:flex}.filter-btn{background:var(--bg-input);border:1px solid var(--border);color:var(--text-muted);cursor:pointer;border-radius:4px;padding:2px 10px;font-size:12px;transition:all .2s}.filter-btn:hover{color:var(--text-h);border-color:var(--text-muted)}.filter-btn-active{background:var(--accent);border-color:var(--accent);color:#fff}.filter-btn-active:hover{color:#fff;border-color:var(--accent)}.sort-btn{background:var(--bg-input);border:1px solid var(--border);color:var(--text);cursor:pointer;white-space:nowrap;border-radius:4px;padding:2px 10px;font-size:12px;transition:all .2s}.sort-btn:hover{color:var(--text-h);border-color:var(--text-muted)}.pack-list-empty{text-align:center;color:var(--text-muted);padding:32px 0;font-size:13px}.pack-cards{flex-direction:column;gap:4px;display:flex}.pack-card{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;align-items:center;gap:10px;padding:8px 12px;transition:border-color .15s,background .15s;display:flex}.pack-card:hover{background:var(--bg-card-hover)}.pack-card-best{border-color:var(--gold);box-shadow:0 0 12px var(--gold-glow)}.pack-card-preview{border:2px solid var(--accent);background:#7c5cfc1f;animation:2s ease-in-out infinite preview-glow;box-shadow:0 0 16px #7c5cfc59}.pack-card-preview:hover{background:#7c5cfc2e}.pack-card-preview .pack-rank,.pack-card-preview .unit-price-value{color:var(--accent)}.tag-preview{background:var(--accent);color:#fff;font-weight:700}.preview-hint{color:var(--accent);text-align:center;background:#7c5cfc1f;border:1px solid #7c5cfc4d;border-radius:6px;margin-bottom:6px;padding:6px 12px;font-size:13px}.preview-hint strong{color:#fff;margin:0 2px;font-size:15px}@keyframes preview-glow{0%,to{box-shadow:0 0 16px #7c5cfc59}50%{box-shadow:0 0 24px #7c5cfc8c}}.base-price-bar{background:var(--bg-card);border:1px solid var(--border);border-radius:6px;align-items:center;gap:8px;margin-bottom:8px;padding:5px 12px;display:flex}.base-price-bar label{color:var(--text-muted);white-space:nowrap;font-size:12px}.base-price-bar input{background:var(--bg-input);border:1px solid var(--border);color:var(--text-h);border-radius:4px;outline:none;width:200px;padding:3px 8px;font-size:13px;transition:border-color .2s}.base-price-bar input:focus{border-color:var(--border-focus);box-shadow:0 0 0 2px var(--accent-glow)}.btn-clear{border:1px solid var(--border);color:var(--text-muted);cursor:pointer;white-space:nowrap;background:0 0;border-radius:4px;padding:2px 8px;font-size:11px;transition:all .2s}.btn-clear:hover{color:var(--text-h);border-color:var(--text-muted)}.save-badge{vertical-align:middle;border-radius:3px;margin-left:6px;padding:1px 6px;font-size:11px;font-weight:700;display:inline-block}.save-positive{color:var(--green);background:#34d39926}.save-negative{color:var(--red);background:#f8717126}.pack-rank{text-align:center;min-width:32px;color:var(--text-muted);font-size:14px;font-weight:700}.pack-card-best .pack-rank{font-size:18px}.pack-card-top3 .pack-rank{color:var(--gold)}.pack-info{flex-wrap:wrap;flex:1;align-items:center;gap:12px;min-width:0;display:flex}.pack-header{align-items:center;gap:6px;min-width:120px;display:flex}.pack-name{color:var(--text-h);white-space:nowrap;font-size:13px;font-weight:600}.pack-tag{text-transform:uppercase;letter-spacing:.4px;border-radius:3px;padding:1px 6px;font-size:10px;font-weight:600}.tag-normal{color:var(--tag-normal);background:#6366f126}.tag-first{color:var(--tag-first);background:#f59e0b26}.tag-event{color:var(--tag-event);background:#ec489926}.tag-newbie{color:var(--tag-newbie);background:#34d39926}.pack-unit-price{white-space:nowrap;align-items:baseline;display:flex}.unit-price-value{color:var(--green);font-variant-numeric:tabular-nums;font-size:16px;font-weight:700}.pack-card-best .unit-price-value{color:var(--gold)}.unit-price-label{color:var(--text-muted);margin-left:3px;font-size:11px}.pack-details{color:var(--text-muted);flex-wrap:wrap;gap:2px 10px;font-size:12px;display:flex}.total-gems{color:var(--accent);font-weight:500}.pack-actions{gap:2px;display:flex}.btn-icon{cursor:pointer;background:0 0;border:1px solid #0000;border-radius:4px;padding:2px 5px;font-size:13px;transition:background .2s}.btn-icon:hover{background:var(--bg-card-hover);border-color:var(--border)}@media (width<=480px){.form-grid{grid-template-columns:1fr 1fr}.pack-info{flex-direction:column;align-items:flex-start;gap:2px}}