.sp-packages-page{max-width:720px;padding-bottom:80px}.sp-tab-bar{display:flex;gap:4px;background:var(--sp-surface-raised, #f5f0ec);border-radius:var(--sp-radius-lg);padding:4px;margin-bottom:20px}.sp-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 12px;font-size:13px;font-weight:600;color:var(--sp-text-secondary, #7a6458);background:transparent;border:none;border-radius:calc(var(--sp-radius-lg) - 2px);cursor:pointer;transition:all .2s ease;white-space:nowrap}.sp-tab:hover:not(.sp-tab-active){color:var(--sp-text-primary);background:#9b6a4f12}.sp-tab-active{background:var(--sp-white, #fff);color:var(--sp-brand, #9b6a4f);box-shadow:0 1px 4px #0000001a}.sp-tab-badge{display:none;min-width:18px;height:18px;padding:0 5px;background:var(--sp-brand, #9b6a4f);color:#fff;font-size:10px;font-weight:700;border-radius:99px;align-items:center;justify-content:center}.sp-tab-badge:not(:empty){display:inline-flex}.sp-tab-active .sp-tab-badge{background:var(--sp-brand, #9b6a4f)}.sp-tab:not(.sp-tab-active) .sp-tab-badge{background:var(--sp-text-muted, #b0a09a)}.sp-filter-chips{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}.sp-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 14px;font-size:12px;font-weight:600;border:1.5px solid var(--sp-border);border-radius:var(--sp-radius-full);background:transparent;color:var(--sp-text-secondary);cursor:pointer;transition:all .18s ease}.sp-chip:hover:not(.sp-chip-active){border-color:var(--sp-brand-light, #c9916a);color:var(--sp-brand)}.sp-chip-active{border-color:var(--sp-brand, #9b6a4f);background:var(--sp-brand, #9b6a4f);color:var(--sp-white)}.sp-chip-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.sp-pkg-item{background:var(--sp-white);border:1.5px solid var(--sp-border);border-radius:var(--sp-radius-lg);margin-bottom:8px;overflow:hidden;cursor:pointer;transition:border-color .25s ease,box-shadow .25s ease}.sp-pkg-item:hover{border-color:var(--sp-brand-light, #c9916a);box-shadow:0 2px 12px #9b6a4f1a}.sp-pkg-item.sp-pkg-expanded{border-color:var(--sp-brand, #9b6a4f);box-shadow:0 4px 24px #9b6a4f2e}.sp-pkg-item:focus-visible{outline:2px solid var(--sp-brand);outline-offset:2px}.sp-pkg-row-header{display:flex;align-items:center;gap:12px;padding:16px 20px;user-select:none;transition:background .25s ease}.sp-pkg-item.sp-pkg-expanded .sp-pkg-row-header{background:linear-gradient(135deg,var(--sp-dark, #1a120d) 0%,#2c1f17 100%)}.sp-pkg-format-tag{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:3px 10px;background:var(--sp-surface-raised, #f5f0ec);color:var(--sp-text-secondary, #7a6458);border-radius:var(--sp-radius-full);white-space:nowrap;flex-shrink:0}.sp-pkg-format-tag .sp-fmt-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.sp-pkg-item.sp-pkg-expanded .sp-pkg-format-tag{background:#d4a57433;color:var(--sp-brand-light, #d4a574)}.sp-pkg-row-meta{flex:1;min-width:0}.sp-pkg-row-meta-name{font-size:14px;font-weight:600;color:var(--sp-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .25s ease}.sp-pkg-row-meta-sub{font-size:12px;color:var(--sp-text-muted);margin-top:1px;transition:color .25s ease}.sp-pkg-item.sp-pkg-expanded .sp-pkg-row-meta-name{color:var(--sp-white)}.sp-pkg-item.sp-pkg-expanded .sp-pkg-row-meta-sub{color:#ffffff8c}.sp-pkg-item.sp-pkg-expanded .sp-pkg-chevron{color:#fff9}.sp-pkg-status-pill{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:4px 10px;border-radius:var(--sp-radius-full);white-space:nowrap;flex-shrink:0}.sp-pkg-status-pill.ACTIVE{background:#10b98126;color:#059669}.sp-pkg-status-pill.ACTIVE:before{content:"";display:inline-block;width:5px;height:5px;background:#10b981;border-radius:50%;animation:sp-pulse 2s infinite}@keyframes sp-pulse{0%,to{opacity:1}50%{opacity:.35}}.sp-pkg-status-pill.EXPIRED{background:var(--sp-danger-soft,#fef2f2);color:var(--sp-danger,#dc2626)}.sp-pkg-status-pill.FROZEN{background:var(--sp-warning-soft,#fffbeb);color:var(--sp-warning,#d97706)}.sp-pkg-status-pill.LOW_BALANCE{background:#f59e0b26;color:#b45309}.sp-pkg-status-pill.LOW_BALANCE:before{content:"";display:inline-block;width:5px;height:5px;background:#f59e0b;border-radius:50%;animation:sp-pulse 2s infinite}.sp-pkg-status-pill.COMPLETED{background:var(--sp-surface-raised,#f5f0ec);color:var(--sp-text-muted)}.sp-pkg-chevron{width:18px;height:18px;color:var(--sp-text-muted);flex-shrink:0;transition:transform .35s cubic-bezier(.4,0,.2,1),color .25s ease}.sp-pkg-item.sp-pkg-expanded .sp-pkg-chevron{transform:rotate(180deg)}.sp-pkg-expand-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s cubic-bezier(.4,0,.2,1)}.sp-pkg-item.sp-pkg-expanded .sp-pkg-expand-wrap{grid-template-rows:1fr}.sp-pkg-expand-inner{overflow:hidden}.sp-pkg-expand-body{background:linear-gradient(135deg,var(--sp-dark,#1a120d) 0%,#2c1f17 100%);color:var(--sp-white);padding:0 20px 24px;position:relative;overflow:hidden;opacity:0;transform:translateY(-6px);transition:opacity .3s ease .06s,transform .3s ease .06s}.sp-pkg-item.sp-pkg-expanded .sp-pkg-expand-body{opacity:1;transform:translateY(0)}.sp-pkg-expand-body:before{content:"";position:absolute;top:-60%;right:-15%;width:300px;height:300px;background:radial-gradient(circle,rgba(212,165,116,.15) 0%,transparent 60%);pointer-events:none}.sp-pkg-id-chip{display:inline-flex;align-items:center;gap:6px;margin-top:16px;margin-bottom:4px;padding:4px 10px 4px 8px;background:#ffffff14;border:1px solid rgba(255,255,255,.14);border-radius:var(--sp-radius-full);font-size:10px;font-weight:600;color:#ffffff8c;letter-spacing:.3px;font-family:JetBrains Mono,Fira Code,ui-monospace,monospace;cursor:default;user-select:all}.sp-pkg-id-chip svg{opacity:.6;flex-shrink:0}.sp-pkg-credits-display{display:flex;align-items:baseline;gap:10px;padding-top:16px;margin-bottom:4px}.sp-pkg-credits-number{font-family:Inter,-apple-system,sans-serif;font-size:56px;font-weight:700;line-height:1;letter-spacing:-2px;color:var(--sp-white)}.sp-pkg-credits-total{font-size:18px;color:#ffffff73;font-weight:500}.sp-pkg-credits-label{font-size:13px;color:#ffffffa6;margin-bottom:16px}.sp-pkg-progress{margin:14px 0 20px}.sp-pkg-progress-bar{height:7px;background:#ffffff1a;border-radius:4px;overflow:hidden}.sp-pkg-progress-fill{height:100%;background:linear-gradient(90deg,var(--sp-brand-light,#d4a574),var(--sp-brand,#9b6a4f));border-radius:4px;transition:width .6s cubic-bezier(.4,0,.2,1) .15s}.sp-pkg-progress-labels{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:#ffffff80}.sp-pkg-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1)}.sp-pkg-stat-label{font-size:10px;font-weight:600;color:#ffffff73;text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}.sp-pkg-stat-value{font-size:13px;font-weight:600;color:var(--sp-white)}.sp-usage-row{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid var(--sp-border)}.sp-usage-row:last-child{border-bottom:none}.sp-usage-fmt-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px}.sp-usage-body{flex:1;min-width:0}.sp-usage-class{font-size:14px;font-weight:500;color:var(--sp-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sp-usage-meta{font-size:11px;color:var(--sp-text-muted);margin-top:2px}.sp-usage-pkg-ref{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:500;color:var(--sp-text-muted);background:var(--sp-surface-raised,#f5f0ec);border-radius:var(--sp-radius-full);padding:2px 7px;margin-top:4px;font-family:JetBrains Mono,Fira Code,ui-monospace,monospace;white-space:nowrap}.sp-usage-pkg-ref svg{opacity:.6}.sp-usage-credit{font-size:13px;font-weight:700;color:var(--sp-text-primary);font-family:Inter,sans-serif;white-space:nowrap;padding-top:1px}.sp-usage-credit.minus{color:var(--sp-danger,#dc2626)}.sp-usage-credit.plus{color:var(--sp-success,#059669)}.sp-empty-state{text-align:center;padding:60px 24px;color:var(--sp-text-muted)}.sp-empty-state-icon{width:64px;height:64px;margin:0 auto 16px;background:var(--sp-surface-raised);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--sp-text-muted)}.sp-mypkg-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}.sp-mypkg-empty-cta{display:inline-block;margin-top:20px;padding:14px 28px;background:var(--sp-brand,#9b6a4f);color:var(--sp-white);border-radius:var(--sp-radius-full);font-size:14px;font-weight:600;letter-spacing:.5px;text-decoration:none;transition:all .2s ease}.sp-mypkg-empty-cta:hover{background:var(--sp-dark,#2c1f17);transform:translateY(-1px)}.sp-filter-empty{text-align:center;padding:40px 24px;color:var(--sp-text-muted);font-size:14px}@media(max-width:768px){.sp-packages-page{padding-bottom:calc(var(--sp-bottomnav-height) + 32px)}.sp-pkg-credits-number{font-size:44px}.sp-pkg-row-header{padding:14px 16px}.sp-pkg-expand-body{padding:0 16px 20px}}