/* Google Font Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #0f172a;
  background: #f8fafc;
  overflow-x: hidden;
}

/* Highly Vibrant Liquid Blob Background - Crimson Theme */
.blob-container {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: #f8fafc;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.18;
  mix-blend-mode: multiply;
  animation: move-blob 22s infinite alternate ease-in-out;
}

.blob-1 {
  width: 750px;
  height: 750px;
  background: radial-gradient(circle, #fca5a5, #f87171);
  top: -15%;
  left: -10%;
}

.blob-2 {
  width: 850px;
  height: 850px;
  background: radial-gradient(circle, #fda4af, #fecdd3);
  bottom: -15%;
  right: -10%;
  animation-duration: 25s;
}

.blob-3 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, #f87171, #fda4af);
  top: 30%;
  left: 40%;
  animation-duration: 15s;
}

@keyframes move-blob {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(80px, -60px) scale(1.1); }
  100% { transform: translate(-50px, 50px) scale(0.95); }
}

.bg {
  position: fixed;
  inset: 0;
  background: #f8fafc;
  z-index: -1;
  opacity: 0;
}

.app {
  width: min(1080px, calc(100% - 36px));
  margin: 0 auto;
  padding: 22px 0 24px;
}

/* Glassmorphism Containers - Bento Style Header */
.topbar {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 22px;
  padding: 0 18px;
  margin-bottom: 28px;
  box-shadow: 
    0 8px 30px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 900;
}

.brand img {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.account {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #cbd6e9;
}

.account a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px 14px;
  border-radius: 12px;
  transition: all 0.2s ease;
}

.account a:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}

.hero {
  text-align: center;
  margin-bottom: 26px;
}

.logo-wrap {
  width: 120px;
  height: 120px;
  margin: 0 auto 20px;
  border-radius: 28px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
  animation: intro 950ms ease both;
}

.logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

@keyframes intro {
  from { opacity: 0; transform: scale(.8) rotate(-5deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

h1 {
  margin: 0;
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 900;
  letter-spacing: -1.5px;
  color: #0f172a;
}

.hero p {
  margin: 10px 0 0;
  color: #475569;
  font-size: 16px;
}

.auth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

/* Parent container is fully transparent */
.card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
}

/* Premium Frosted Glass - Bento Cards */
.auth-card, .buy-card, .quality-card, .drop, .queue-live {
  border-radius: 24px;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  padding: 24px !important;
  box-shadow: 
    0 10px 40px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  margin-bottom: 18px !important;
  transition: all 0.25s ease;
}

.auth-card:hover, .buy-card:hover, .quality-card:hover, .drop:hover, .queue-live:hover {
  border-color: rgba(15, 23, 42, 0.12) !important;
  box-shadow: 
    0 12px 45px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  transform: translateY(-1px);
}

.auth-card h2 {
  margin: 0 0 16px;
  font-weight: 800;
}

.auth-card input {
  width: 100%;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.4);
  border-radius: 12px;
  margin-bottom: 12px;
  color: #fff;
  padding: 0 14px;
  font-size: 15px;
  transition: all 0.2s ease;
}

.auth-card input:focus {
  border-color: rgba(255, 255, 255, 0.25);
  outline: none;
}

.auth-card button, .start, #pick, .discord-buy, .download {
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
  box-shadow: none !important;
  transition: all 0.2s ease;
}

.auth-card button:hover, .start:hover:not(:disabled), #pick:hover, .discord-buy:hover, .download:hover {
  background: linear-gradient(135deg, #f87171, #dc2626) !important;
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

.auth-card button {
  width: 100%;
  height: 52px;
  border-radius: 12px;
  font-size: 16px;
}

.auth-card p {
  color: #cbd6e9;
  font-size: 14px;
}

/* Quota is styled as a distinct small glass bar */
.quota {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  color: #0f172a;
  font-weight: 600;
  font-size: 14px;
  border-radius: 20px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  padding: 16px 20px;
  flex-wrap: wrap;
  box-shadow: 
    0 10px 30px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.drop {
  min-height: 280px;
  border: 2px dashed rgba(15, 23, 42, 0.15) !important;
  display: grid;
  place-items: center;
  text-align: center;
}

.drop:hover {
  border-color: rgba(15, 23, 42, 0.3) !important;
}

.drop.drag {
  transform: scale(1.005);
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.06) !important;
}

.upload-icon {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
  font-size: 36px;
  font-weight: 800;
}

.drop h2 {
  margin: 12px 0 0;
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
}

.drop p {
  margin: 4px 0 16px;
  color: #475569;
}

#pick {
  padding: 12px 28px;
  border-radius: 12px;
  font-size: 15px;
}

.file-name {
  margin-top: 14px;
  color: #475569;
  word-break: break-all;
  font-size: 14px;
  font-weight: 700;
}

.start {
  width: 100%;
  margin-top: 18px;
  min-height: 56px;
  border-radius: 14px;
  font-size: 18px;
}

.start:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none !important;
}

.method-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.cancel-job {
  width: 100%;
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(255, 89, 100, .42);
  color: #ff7b84;
  background: rgba(125, 15, 25, .16);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}

.cancel-job:hover:not(:disabled) {
  border-color: rgba(255, 89, 100, .72);
  background: rgba(164, 20, 32, .25);
}

.cancel-job:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.progress-wrap {
  margin-top: 18px;
  padding: 10px;
}

.progress {
  height: 14px;
  background: #e2e8f0;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 999px;
  overflow: hidden;
}

.bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #ef4444, #f87171) !important;
  transition: width .25s ease;
}

#status {
  display: block;
  margin-top: 8px;
  color: #0f172a;
  font-weight: 700;
  font-size: 14px;
}

.download {
  display: block;
  margin-top: 18px;
  text-align: center;
  padding: 14px;
  border-radius: 14px;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
  font-size: 18px;
  font-weight: 800;
}

footer {
  margin-top: 24px;
  text-align: center;
  color: #64748b;
}

@media(max-width:720px){
  .auth-grid { grid-template-columns: 1fr; }
  .quota, .topbar { align-items: flex-start; flex-direction: column; height: auto; padding: 16px; gap: 10px; }
}

.buy-card h2 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 800;
}

.packages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.note {
  color: #cbd6e9;
  font-size: 14px;
}

.discord-buy {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 18px;
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
}

@media(max-width:720px){
  .packages { grid-template-columns: 1fr; }
}

/* Alert Notification Boxes (No Glow) */
.alert {
  width: 100%;
  margin: 0 0 18px 0;
  padding: 14px 18px;
  border-radius: 14px;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(10, 25, 47, 0.6);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}

.alert.success {
  border-color: rgba(34, 197, 94, 0.4);
  background: rgba(20, 83, 45, 0.45);
}

.alert.info {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(127, 29, 29, 0.45);
}

.alert.error {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(127, 29, 29, 0.45);
}

.quality-card h2 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 800;
}

.credit-preview {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-top: 12px;
  color: #cbd6e9;
  flex-wrap: wrap;
  font-size: 14px;
}

.credit-preview > span {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 10px 14px;
}

.credit-preview b {
  color: #fff;
}

.live-ok {
  color: #4ade80;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.lang-select {
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(0, 0, 0, 0.4) !important;
  color: #fff !important;
  border-radius: 10px;
  padding: 0 10px;
  font-weight: 700;
  outline: none;
}

.account small {
  color: #cbd6e9;
  font-weight: 500;
}

.shopier-packages .package-link {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: #0f172a;
  transition: all 0.2s ease;
}

.shopier-packages .package-link:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 23, 42, 0.18);
  background: rgba(255, 255, 255, 0.9);
}

.teng-footer {
  margin-top: 22px;
  text-align: center;
  color: #64748b;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  padding: 18px;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.creator-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
  font-weight: 800;
}

.creator-links a {
  color: #0f172a;
  text-decoration: none;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.5);
  transition: all 0.2s ease;
}

.creator-links a:hover {
  border-color: rgba(15, 23, 42, 0.18);
  background: rgba(255, 255, 255, 0.9);
}

.forgot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  padding: 8px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd6e9;
  text-decoration: none;
  font-weight: 700;
  transition: all 0.2s ease;
}

.forgot-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.queue-live {
  margin: 0 0 18px 0;
  color: #cbd6e9;
}

.queue-live b {
  font-size: 16px;
}

.queue-live span {
  color: #ef4444;
  font-weight: 800;
}

.queue-items {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.queue-items span {
  display: inline-flex;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 6px 10px;
  color: white;
  font-size: 12px;
}

.quality-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.quality-option {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  padding: 16px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.quality-option:hover {
  border-color: rgba(15, 23, 42, 0.15);
  transform: translateY(-1px);
}

.quality-option.active {
  background: rgba(239, 68, 68, 0.06);
  border-color: #ef4444;
}

.quality-option .opt-label {
  font-weight: 800;
  font-size: 15px;
  color: #0f172a;
}

.quality-option .opt-cost {
  font-size: 13px;
  font-weight: 700;
  color: #475569;
}

.quality-option.active .opt-cost {
  color: #ef4444;
}

/* Bento Grid Layout Style Guide */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
  margin-top: 24px;
}

.bento-card {
  border-radius: 24px;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  padding: 24px !important;
  box-shadow: 
    0 10px 40px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  transition: all 0.25s ease;
}

.bento-card:hover {
  border-color: rgba(15, 23, 42, 0.12) !important;
  transform: translateY(-1px);
}

.bento-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.top-credits-badge {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-radius: 12px;
  padding: 8px 16px;
  font-weight: 800;
  color: #ef4444;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Quota rows in side bento cards */
.quota-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.quota-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.quota-row:first-child {
  padding-top: 0;
}

.quota-row span {
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
}

.quota-row b {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
}

.discord-connect-btn {
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
  background: #5865f2;
  padding: 6px 12px;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.discord-connect-btn:hover {
  background: #4752c4;
}

/* Coupon Styles */
.coupon-section {
  margin-top: 18px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  padding-top: 16px;
}

.coupon-form {
  display: flex;
  gap: 8px;
}

.coupon-form input {
  flex: 1;
  height: 42px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  color: #0f172a;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  transition: border-color 0.15s ease;
}

.coupon-form input:focus {
  border-color: rgba(15, 23, 42, 0.25);
  outline: none;
}

.coupon-form button {
  height: 42px;
  border: none;
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  color: #fff;
  font-weight: 800;
  padding: 0 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.coupon-form button:hover {
  transform: translateY(-1px);
}

/* Queue Card Full styling */
.queue-card-full {
  margin-top: 20px;
}

.queue-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 12px;
}

.queue-header b {
  font-size: 15px;
  color: #cbd5e1;
}

.badge {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 800;
}

/* Media query for mobile */
@media (max-width: 768px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

.quota-card .quota {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
}

.main-action-card .drop {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 16px;
  margin-bottom: 16px !important;
}

/* Category & Topbar Navigation Header */
.topbar-nav {
  display: flex;
  gap: 12px;
  align-items: center;
}

.nav-item {
  color: #475569;
  font-weight: 700;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 14px;
  transition: all 0.2s ease;
}

.nav-item:hover {
  background: rgba(15, 23, 42, 0.04);
  color: #0f172a;
}

.nav-item.active {
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.15);
}

.topbar-logout-btn {
  color: #ef4444;
  text-decoration: none;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.15);
  font-size: 13px;
  transition: all 0.2s ease;
}

.topbar-logout-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  transform: translateY(-1px);
}

/* Tab contents switcher */
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* Discord Large Login Buttons */
.discord-login-container {
  display: flex;
  justify-content: center;
  margin: 32px 0 48px;
}

.discord-login-btn-large {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #5865f2;
  color: #fff !important;
  text-decoration: none;
  font-weight: 800;
  font-size: 18px;
  padding: 16px 36px;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(88, 101, 242, 0.35);
  transition: all 0.2s ease;
}

.discord-login-btn-large:hover {
  background: #4752c4;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(88, 101, 242, 0.45);
}

.discord-icon {
  width: 24px;
  height: 24px;
}

.section-title-center {
  text-align: center;
  font-size: 24px;
  font-weight: 900;
  color: #0f172a;
  margin: 40px 0 24px;
  letter-spacing: -0.5px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.stat-bento {
  text-align: center;
  padding: 32px 20px !important;
}

.stat-icon {
  font-size: 36px;
  display: block;
  margin-bottom: 12px;
}

.stat-number {
  font-size: 28px;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 6px;
}

.stat-label {
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
}

@media (max-width: 900px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 550px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

/* Live Activity Widget Styles */
.live-activity-card {
  border-radius: 24px;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  padding: 24px !important;
  box-shadow: 
    0 10px 40px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  margin-top: 24px;
}

.live-activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  padding-bottom: 12px;
}

.live-activity-header span {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
}

/* Green Pulsing Dot */
.pulse-dot {
  width: 8px;
  height: 8px;
  background-color: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  animation: pulse-green 1.8s infinite;
}

@keyframes pulse-green {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

.live-activity-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.live-activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.02);
  border: 1px solid rgba(15, 23, 42, 0.03);
  transition: all 0.2s ease;
}

.live-activity-item:hover {
  background: rgba(239, 68, 68, 0.03);
  border-color: rgba(239, 68, 68, 0.08);
}

.activity-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(15, 23, 42, 0.08);
}

.activity-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #475569;
}

.activity-username {
  font-weight: 800;
  color: #0f172a;
}

.activity-action {
  color: #64748b;
}

.activity-size {
  font-weight: 800;
  color: #ef4444;
}

/* Haze-inspired red premium dark theme */
:root {
  color-scheme: dark;
  --red: #ef3340;
  --red-bright: #ff4d59;
  --red-deep: #9f101b;
  --ink: #050506;
  --panel: rgba(15, 15, 18, .86);
  --panel-strong: #111114;
  --line: rgba(255, 255, 255, .075);
  --text: #f3f3f4;
  --muted: #8b8b93;
}

* { box-sizing: border-box; }
html { background: var(--ink); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(680px 420px at 15% 12%, rgba(179, 18, 31, .12), transparent 65%),
    radial-gradient(720px 460px at 87% 55%, rgba(102, 5, 18, .10), transparent 68%),
    #050506 !important;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.blob-container, .bg { display: none !important; }
.app { width: min(1120px, calc(100% - 40px)); padding: 0 0 48px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 58px;
  margin: 0 calc((1120px - 100vw)/2) 64px;
  padding: 0 max(24px, calc((100vw - 1120px)/2));
  width: 100vw;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0;
  background: rgba(7, 7, 8, .82) !important;
  box-shadow: none !important;
  backdrop-filter: blur(22px) saturate(140%);
}
.brand { gap: 10px; font-size: 15px; letter-spacing: -.25px; white-space: nowrap; }
.brand::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 14px rgba(239,51,64,.7); }
.brand img { display: none; }
.topbar-nav { gap: 5px; margin-left: auto; margin-right: auto; }
.nav-item {
  padding: 8px 13px;
  border: 0;
  border-radius: 9px;
  color: #77777f;
  font-size: 13px;
  font-weight: 650;
}
.nav-item:hover { color: #dddde1; background: rgba(255,255,255,.035); }
.nav-item.active { color: #fff; background: rgba(239,51,64,.10); border: 0; }
.top-actions { gap: 8px; }
.lang-select, .topbar-logout-btn, .top-credits-badge {
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--line) !important;
  background: rgba(255,255,255,.035) !important;
  color: #b8b8bf !important;
  box-shadow: none;
}
.top-credits-badge { padding: 7px 11px; color: #ff6872 !important; }
.topbar-logout-btn { display: inline-flex; align-items: center; padding: 7px 11px; }
.topbar-logout-btn:hover { background: rgba(239,51,64,.12) !important; color: #fff !important; }

.hero { margin: 0 auto 42px !important; max-width: 720px; }
.logo-wrap { display: none; }
h1, .hero h1 {
  color: #f2f2f3 !important;
  font-size: clamp(44px, 6vw, 66px);
  line-height: 1.02;
  font-weight: 760;
  letter-spacing: -3px;
}
.hero p { margin-top: 16px; color: #77777f; font-size: 17px; line-height: 1.55; }
.hero p b { color: #c9c9ce; }
.section-title-center { color: #eeeeef; font-size: 30px; letter-spacing: -1.1px; }

.bento-card, .live-activity-card, .auth-card, .buy-card, .quality-card, .drop, .queue-live {
  color: var(--text);
  border: 1px solid var(--line) !important;
  border-radius: 26px !important;
  background: linear-gradient(145deg, rgba(18,18,21,.94), rgba(11,11,13,.94)) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.025) !important;
  backdrop-filter: blur(18px) !important;
}
.bento-card:hover, .live-activity-card:hover, .auth-card:hover, .buy-card:hover, .quality-card:hover, .drop:hover, .queue-live:hover {
  border-color: rgba(239,51,64,.25) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.34), 0 0 0 1px rgba(239,51,64,.025) !important;
  transform: translateY(-2px);
}
.dashboard-grid { grid-template-columns: minmax(0, 1.42fr) minmax(300px, .94fr); gap: 18px; }
.bento-sidebar { gap: 18px; }
.main-action-card { padding: 18px !important; }
.main-action-card .drop {
  min-height: 300px;
  border: 1px dashed rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.018) !important;
}
.main-action-card .drop:hover, .main-action-card .drop.drag { border-color: rgba(239,51,64,.55) !important; background: rgba(239,51,64,.035) !important; }
.upload-icon { background: rgba(239,51,64,.10) !important; color: var(--red-bright); border: 1px solid rgba(239,51,64,.16); }
.drop h2, .quality-card h2, .buy-card h2, .quota-card h2 { color: #eeeeef !important; }
.drop p, .file-name, .stat-label, .quota-row span, .activity-action { color: var(--muted) !important; }

.stats-grid { gap: 16px; }
.stat-bento { min-height: 154px; text-align: left; position: relative; }
.stat-icon { color: var(--red-bright); filter: grayscale(1) sepia(1) saturate(6) hue-rotate(310deg); opacity: .88; }
.stat-number { color: #eeeeef !important; font-size: 34px; letter-spacing: -1px; }
.stat-bento:nth-child(2) .stat-number { color: #ff5964 !important; }

.quality-grid { gap: 9px; }
.quality-option, .shopier-packages .package-link {
  color: #e5e5e7;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.025);
  border-radius: 14px;
}
.quality-option:hover, .shopier-packages .package-link:hover { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.13); }
.quality-option.active { background: rgba(239,51,64,.09); border-color: rgba(239,51,64,.58); box-shadow: inset 0 0 20px rgba(239,51,64,.035); }
.quality-option .opt-label, .quota-row b, .activity-username { color: #e9e9eb !important; }
.quality-option .opt-cost { color: #77777f; }
.quality-option.active .opt-cost, .activity-size { color: #ff5964; }
.credit-preview > span, .quota {
  color: #9999a1;
  border: 1px solid var(--line) !important;
  background: rgba(0,0,0,.22) !important;
  box-shadow: none !important;
}
.credit-preview b { color: #fff; }
.quota-row { border-color: var(--line); }

.auth-card button, .start, #pick, .discord-buy, .download, .coupon-form button {
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(135deg, var(--red-bright), #c81927 58%, var(--red-deep)) !important;
  box-shadow: 0 10px 28px rgba(196,20,33,.18) !important;
}
.auth-card button:hover, .start:hover:not(:disabled), #pick:hover, .discord-buy:hover, .download:hover, .coupon-form button:hover {
  background: linear-gradient(135deg, #ff6872, #dd2330) !important;
  box-shadow: 0 14px 34px rgba(196,20,33,.28) !important;
}
.discord-login-btn-large { border-radius: 14px; box-shadow: none; }
.progress { background: #09090a; border-color: var(--line); }
.bar { background: linear-gradient(90deg, #ac1420, #ff5964) !important; }
#status { color: #aaaab1; }
.coupon-form input, .auth-card input {
  color: #eee !important;
  border-color: var(--line) !important;
  background: rgba(0,0,0,.25) !important;
}
.coupon-form input:focus, .auth-card input:focus { border-color: rgba(239,51,64,.55) !important; box-shadow: 0 0 0 3px rgba(239,51,64,.08); }

.live-activity-card { margin-top: 18px; }
.live-activity-header { border-color: var(--line); }
.live-activity-header span { color: #dcdcdf; }
.pulse-dot { background: var(--red); box-shadow: 0 0 0 0 rgba(239,51,64,.6); animation-name: pulse-red; }
@keyframes pulse-red { 0%{box-shadow:0 0 0 0 rgba(239,51,64,.55)} 70%{box-shadow:0 0 0 7px rgba(239,51,64,0)} 100%{box-shadow:0 0 0 0 rgba(239,51,64,0)} }
.live-activity-item { background: transparent; border-color: transparent; }
.live-activity-item:hover { background: rgba(255,255,255,.025); border-color: var(--line); }
.activity-avatar { border-color: rgba(255,255,255,.10); }
.activity-info { color: #77777f; }

.teng-footer { background: transparent; border-color: var(--line); color: #65656c; box-shadow: none; }
.creator-links a { color: #aaaab1; background: rgba(255,255,255,.025); border-color: var(--line); }
.creator-links a:hover { color: #fff; background: rgba(239,51,64,.07); border-color: rgba(239,51,64,.25); }
.alert { background: rgba(14,14,16,.92); border-color: rgba(239,51,64,.25); }

@media (max-width: 900px) {
  .topbar { margin-bottom: 42px; padding: 10px 20px; height: auto; flex-wrap: wrap; gap: 8px; }
  .topbar-nav { order: 3; width: 100%; overflow-x: auto; justify-content: flex-start; padding-top: 4px; }
  .dashboard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .app { width: min(100% - 24px, 1120px); }
  .top-actions .top-credits-badge { display: none; }
  h1, .hero h1 { font-size: 42px; letter-spacing: -2px; }
  .stats-grid { grid-template-columns: 1fr; }
  .bento-card { border-radius: 20px !important; }
}

/* Liquid red dashboard — concept v2 */
body {
  background:
    radial-gradient(900px 620px at -8% 32%, rgba(155, 20, 39, .34), transparent 66%),
    radial-gradient(760px 560px at 106% 48%, rgba(194, 31, 48, .30), transparent 68%),
    radial-gradient(560px 320px at 50% -8%, rgba(89, 22, 38, .18), transparent 70%),
    linear-gradient(145deg, #06070a 0%, #090910 50%, #08070a 100%) !important;
  background-attachment: fixed !important;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}
.app { width: min(1040px, calc(100% - 40px)); }
.topbar {
  width: min(calc(100vw - 32px), 1500px);
  margin: 16px 50% 64px;
  transform: translateX(-50%);
  padding: 0 22px;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 22px;
  background: linear-gradient(120deg, rgba(255,255,255,.085), rgba(255,255,255,.028)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 18px 60px rgba(0,0,0,.26) !important;
  backdrop-filter: blur(32px) saturate(145%);
}
.topbar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(110deg, rgba(255,255,255,.07), transparent 26%, transparent 70%, rgba(255,69,83,.055));
}
.brand, .topbar-nav, .top-actions { position: relative; z-index: 1; }
.nav-item.active { background: transparent; color: #ff5964; box-shadow: inset 0 -2px #ff4c59; border-radius: 0; }
.hero { margin-bottom: 28px !important; }
.eyebrow { display: inline-block; margin-bottom: 14px; color: #ff6570; font-size: 11px; font-weight: 800; letter-spacing: .24em; }
h1, .hero h1 { font-size: clamp(50px, 7vw, 72px); font-weight: 650; letter-spacing: -4px; }
.hero p { font-size: 16px; }
.account-strip {
  width: min(600px, 100%);
  min-height: 62px;
  margin: 0 auto 36px;
  padding: 0 22px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 22px;
  color: #aaaab2;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 17px;
  background: linear-gradient(120deg, rgba(255,255,255,.08), rgba(255,65,82,.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 16px 46px rgba(0,0,0,.22);
  backdrop-filter: blur(28px) saturate(150%);
  transition: .22s ease;
}
.account-strip:hover { transform: translateY(-2px); border-color: rgba(255,91,103,.36); }
.account-strip i { display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: #ff4f5c; box-shadow: 0 0 14px rgba(255,79,92,.65); }
.account-strip strong { color: #ff6873; font-size: 13px; }
.strip-arrow { color: #ff6873; font-size: 20px; }
.dashboard-section-title { margin: 0 0 14px; color: #777780; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-align: left; text-transform: uppercase; }
.stats-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.bento-card, .live-activity-card, .auth-card, .buy-card, .quality-card, .drop, .queue-live {
  position: relative;
  overflow: hidden;
  border-color: rgba(255,255,255,.14) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.092), rgba(255,255,255,.025) 55%, rgba(255,55,74,.035)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 1px 0 0 rgba(255,255,255,.045), 0 22px 60px rgba(0,0,0,.25) !important;
  backdrop-filter: blur(30px) saturate(145%) !important;
}
.bento-card::before, .live-activity-card::before {
  content: "";
  position: absolute;
  top: 0; left: 8%; right: 34%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.78), transparent);
  opacity: .7;
  pointer-events: none;
}
.bento-card:hover, .live-activity-card:hover { border-color: rgba(255,102,113,.34) !important; }
.stat-bento { min-height: 132px; padding: 22px !important; }
.stat-icon { position: absolute; right: 20px; top: 22px; font-size: 22px; opacity: .55; }
.stat-number { margin-top: 20px; font-size: 28px; color: #ff5965 !important; }
.stat-label { font-size: 12px; }
.landing-lower-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; }
.landing-actions { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
.dashboard-action {
  min-height: 142px;
  padding: 25px !important;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  color: #fff;
  text-decoration: none;
}
.dashboard-action .action-icon { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; background: rgba(255,255,255,.045); color: #ff5965; }
.dashboard-action strong, .dashboard-action small { display: block; }
.dashboard-action strong { margin-bottom: 7px; font-size: 17px; }
.dashboard-action small { color: #85858e; line-height: 1.4; }
.dashboard-action b { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(135deg,#ff6671,#d41e2c); box-shadow: 0 10px 26px rgba(212,30,44,.25); font-size: 20px; }
.live-activity-card { min-height: 300px; padding: 25px !important; }
.live-activity-list { gap: 3px; }
.live-activity-item { padding: 9px 6px; border-bottom: 1px solid rgba(255,255,255,.055); border-radius: 0; }
.live-activity-item:last-child { border-bottom: 0; }
.teng-footer { border: 0; background: transparent; }
@media (max-width: 900px) {
  .topbar { width: calc(100vw - 20px); margin-top: 10px; padding: 11px 16px; transform: translateX(-50%); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .landing-lower-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .account-strip { grid-template-columns: 1fr auto; }
  .account-strip strong { display: none; }
  .stats-grid { grid-template-columns: 1fr; }
  .dashboard-action { min-height: 120px; padding: 20px !important; }
}

/* Readability pass for guest Method and Credit views */
.method-login-card {
  border-color: rgba(255, 255, 255, .19) !important;
  background:
    radial-gradient(420px 190px at 50% 0%, rgba(255, 82, 98, .11), transparent 70%),
    linear-gradient(140deg, rgba(38, 38, 48, .94), rgba(22, 20, 29, .96)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 28px 80px rgba(0, 0, 0, .34),
    0 0 60px rgba(153, 25, 42, .08) !important;
}
.method-login-card h2,
.method-login-card h2[style] {
  color: #f6f7fb !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .32);
}
.method-login-card p,
.method-login-card p[style] {
  color: #aeb3c2 !important;
}
.method-login-card p br + br { line-height: 2.1; }
.method-login-card .discord-login-btn-large {
  border: 1px solid rgba(255,255,255,.17);
  background: linear-gradient(135deg, #6672ff, #4f5ce8) !important;
  box-shadow: 0 14px 34px rgba(82, 96, 240, .25);
}
.method-login-card .discord-login-btn-large:hover {
  background: linear-gradient(135deg, #7480ff, #5865f2) !important;
  box-shadow: 0 18px 42px rgba(82, 96, 240, .34);
}
.teng-footer {
  color: #858893 !important;
}
.creator-links a {
  color: #c1c3cc !important;
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.11) !important;
}
.nav-item { color: #92939d; }
.nav-item:hover { color: #f0f0f3; }

.auth-gate-grid { margin-top: 26px; text-align: left; }
.auth-gate-grid .auth-card {
  margin: 0 !important;
  background: linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.025)) !important;
  border-color: rgba(255,255,255,.12) !important;
}
.auth-gate-grid .auth-card h2 { color: #f4f4f5; }
.auth-gate-grid .auth-card p { margin: 12px 0 0; text-align: center; }
.auth-gate-grid .auth-card a { color: #ff6678; text-decoration: none; }
.honeypot-field { position: absolute !important; left: -10000px !important; opacity: 0 !important; pointer-events: none !important; }
.discord-link-small {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 9px;
  color: #cbd2ff;
  background: rgba(88,101,242,.14);
  border: 1px solid rgba(88,101,242,.26);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

/* Profile hub */
.profile-hero{display:flex;align-items:center;gap:20px;padding:28px 30px!important;margin-bottom:20px;background:linear-gradient(125deg,rgba(255,73,87,.13),rgba(20,18,27,.88) 46%,rgba(94,44,76,.18))!important}
.profile-avatar{width:72px;height:72px;border-radius:22px;display:grid;place-items:center;flex:0 0 auto;overflow:hidden;background:linear-gradient(145deg,#ff4d5d,#8f1022);border:1px solid rgba(255,255,255,.17);box-shadow:0 14px 40px rgba(239,51,64,.2);font-size:28px;font-weight:900;color:#fff}
.profile-avatar img{width:100%;height:100%;object-fit:cover}.profile-identity{min-width:0}.profile-identity h2{margin:5px 0 2px;color:#f7f7f8;font-size:28px}.profile-identity p{margin:0;color:#9696a1}.profile-balance{margin-left:auto;text-align:right;display:flex;flex-direction:column;gap:3px}.profile-balance span,.profile-balance small{color:#9898a2;font-size:12px}.profile-balance strong{color:#ff5964;font-size:23px}
.profile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:20px}.profile-panel{padding:24px!important;min-height:224px}.profile-panel h3,.profile-history h3{margin:4px 0 10px;color:#f2f2f4;font-size:20px}.profile-kicker{color:#ff5964;font-size:10px;font-weight:900;letter-spacing:.16em}.profile-muted{color:#9797a1;font-size:13px;line-height:1.55;margin:0 0 18px}.profile-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.connection-dot{width:10px;height:10px;border-radius:50%;background:#64646e;box-shadow:0 0 0 6px rgba(100,100,110,.08)}.connection-dot.connected{background:#26d17f;box-shadow:0 0 0 6px rgba(38,209,127,.09),0 0 18px rgba(38,209,127,.45)}
.discord-profile-row{display:flex;flex-direction:column;gap:18px}.discord-profile-row div{display:flex;flex-direction:column;gap:5px}.discord-profile-row strong{color:#dcdce1}.discord-profile-row small{color:#777782;font-size:11px}.profile-primary-btn,.profile-secondary-btn,.profile-code-form button{border:0;border-radius:12px;min-height:43px;padding:0 17px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:#fff;font-weight:800;font-size:13px;cursor:pointer;background:linear-gradient(100deg,#ff4656,#bd1026);box-shadow:0 10px 28px rgba(239,51,64,.18)}.profile-secondary-btn{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);box-shadow:none;color:#b8b8c0}.profile-code-form{display:flex;gap:9px;margin-top:auto}.profile-code-form input{min-width:0;flex:1;height:43px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(3,3,7,.42);color:#fff;padding:0 13px;outline:none;text-transform:uppercase}.profile-code-form input:focus{border-color:rgba(255,77,91,.65);box-shadow:0 0 0 3px rgba(255,77,91,.08)}.profile-code-form button{white-space:nowrap}
.profile-history{padding:26px!important}.history-count{color:#8d8d97;font-size:12px;border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:7px 11px}.history-list{margin-top:14px}.history-item{display:grid;grid-template-columns:38px minmax(180px,1fr) 85px 100px 105px;align-items:center;gap:13px;padding:15px 4px;border-top:1px solid rgba(255,255,255,.065)}.history-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;color:#ff5964;background:rgba(239,51,64,.1);font-size:11px}.history-main{min-width:0;display:flex;flex-direction:column;gap:5px}.history-main strong{color:#dedee2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-main small,.history-size,.history-expired{color:#777782;font-size:11px}.history-status{font-size:11px;font-weight:800;color:#a9a9b2}.status-done{color:#36d58b}.status-error{color:#ff5964}.status-processing{color:#e2b45e}.history-download{color:#fff;text-align:center;text-decoration:none;font-size:12px;font-weight:800;padding:8px 12px;border-radius:10px;background:linear-gradient(100deg,#ff4656,#bd1026)}.history-empty{text-align:center;color:#797984;padding:45px 10px 25px}
@media(max-width:900px){.profile-grid{grid-template-columns:1fr}.history-item{grid-template-columns:38px 1fr auto}.history-size{display:none}.history-status{grid-column:2}.history-download,.history-expired{grid-column:3;grid-row:1/3}.profile-hero{align-items:flex-start;flex-wrap:wrap}.profile-balance{width:100%;margin-left:92px;text-align:left}}@media(max-width:560px){.profile-balance{margin-left:0}.profile-code-form{flex-direction:column}.profile-code-form button{width:100%}.history-item{grid-template-columns:34px 1fr}.history-download,.history-expired{grid-column:2;grid-row:auto;text-align:left}.topbar-nav{overflow-x:auto}}

.package-icon {
  width: 48px;
  height: 48px;
  display: inline-grid !important;
  place-items: center;
  margin-bottom: 14px;
  border: 1px solid rgba(255, 75, 96, .28);
  border-radius: 15px;
  color: #ff4b60;
  background: linear-gradient(145deg, rgba(255,75,96,.16), rgba(255,75,96,.04));
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 12px 30px rgba(216,25,48,.12);
}
.package-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.package-icon svg path:first-child { fill: rgba(255,75,96,.12); }