:root { --tab-offset: 74px; }
#dashboard { display: flex; flex-direction: column; min-height: 100vh; padding: 0 12px 12px; box-sizing: border-box; }
#appContent { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.content-scroll { flex: 1; overflow-y: auto; padding-right: 6px; }
body { font-family: Arial, sans-serif; margin: 0; background: #0b1020; color: #e8ecf1; }
header { margin-bottom: 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-left: 4px; padding-right: 4px; position: sticky; top: 0; z-index: 400; background: #0b1020; padding-top: 10px; padding-bottom: 6px; box-shadow: 0 8px 20px rgba(0,0,0,0.35); }
.app-bar { display: flex; align-items: center; gap: 12px; width: 100%; }
.title-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.app-title { margin: 0; }
.app-logo { display: none; width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, #5ac8fa, #43d1c4); color: #0b1020; font-weight: 800; font-size: 14px; align-items: center; justify-content: center; }
.header-search { flex: 1 1 320px; max-width: 420px; min-width: 220px; display: flex; gap: 8px; align-items: center; background: #0f1628; border: 1px solid #1f2a47; border-radius: 10px; padding: 6px 10px; }
button { padding: 6px 10px; margin-right: 4px; cursor: pointer; border-radius: 6px; border: 1px solid #2b3755; background: #0f1628; color: #e8ecf1; }
button.primary { background: linear-gradient(90deg, #43d1c4, #5ac8fa); color: #0b1020; border: none; font-weight: 600; }
button.primary:hover { filter: brightness(1.05); }
button.active { background: #5ac8fa; color: #0b1020; border: none; }
    .cta-btn { width: auto; padding: 10px 12px; border-radius: 10px; font-weight: 700; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }
    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
    .card { background: #12182c; border: 1px solid #1f2a47; border-radius: 10px; padding: 12px; display: grid; grid-template-columns: 96px 1fr; gap: 10px; overflow: hidden; }
    .card > div:last-child { min-width: 0; }
    .thumb { width: 96px; height: 96px; border-radius: 8px; object-fit: cover; background: #0b1020; border: 1px solid #1f2a47; }
    .card h3 { margin: 0 0 6px; font-size: 16px; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
    .card h3 [data-title] { flex: 1; min-width: 0; word-break: break-word; }
    .meta { font-size: 12px; color: #9fb3d1; }
    canvas { background: #0b1020; border-radius: 8px; padding: 6px; width: 100%; max-width: 100%; box-sizing: border-box; display: block; }
    a { color: #7fc7ff; text-decoration: none; }
    a:hover { text-decoration: underline; }
    .pill { background: #1a233b; border: 1px solid #2b3755; border-radius: 999px; padding: 4px 8px; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
    .pill button { padding: 2px 6px; font-size: 11px; }
    .heat-meter { margin-top: 6px; }
    .heat-track { position: relative; height: 12px; background: linear-gradient(90deg, #1f6feb 0%, #43d1c4 40%, #f5c452 70%, #ff5f6d 100%); border-radius: 999px; overflow: hidden; box-shadow: inset 0 0 8px rgba(0,0,0,0.35); }
    .heat-track::after { content: ''; position: absolute; inset: -8px 55% -8px -8px; background: radial-gradient(circle at 0% 50%, rgba(99,179,255,0.24), transparent 55%); pointer-events: none; filter: blur(4px); }
    .heat-needle { position: absolute; top: -3px; width: 12px; height: 20px; border-radius: 999px; background: #f5c452; left: 50%; transform: translateX(-50%); transition: left 0.25s ease, background 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 0 14px rgba(245,196,82,0.45); }
    .heat-needle.is-cold { filter: blur(1px); box-shadow: 0 0 14px rgba(99,179,255,0.45); }
    .heat-needle.is-hot { box-shadow: 0 0 16px rgba(255,95,109,0.65); }
    .heat-labels { display: flex; justify-content: space-between; font-size: 11px; color: #7e8ba3; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.3px; }
    .heat-labels span[data-heat-label] { color: #e8ecf1; font-weight: 600; }
    .bonus-wrap { margin-top: 8px; }
    .bonus-track { position: relative; height: 12px; background: #0f1f2c; border: 1px solid #1f2a47; border-radius: 999px; overflow: hidden; }
    .bonus-fill { position: absolute; inset: 0; width: 0%; background: #5a6278; transition: width 0.2s ease, background 0.2s ease; }
    .landing { max-width: 520px; margin: 80px auto; text-align: center; }
    .logo { font-size: 28px; font-weight: bold; letter-spacing: 1px; margin-bottom: 6px; }
    .login-card { background: #12182c; border: 1px solid #1f2a47; border-radius: 10px; padding: 16px; margin-top: 12px; }
    .login-card input { padding: 10px 12px; width: 100%; max-width: 280px; }
.tab-row { display: flex; align-items: stretch; gap: 10px; justify-content: space-between; position: static; background: transparent; padding: 4px 0 2px; }
.tab-group { display: flex; flex: 1; width: auto; gap: 0; border: 1px solid #2b3755; border-radius: 0; padding: 2px; background: #0f1628; height: 44px; }
.tab-group .tab-btn,
.tab-group .drawer-tab { border: none; border-radius: 0; background: transparent; color: #e8ecf1; padding: 10px 12px; font-weight: 600; flex: 1; }
.tab-group .tab-btn.active,
.tab-group .drawer-tab.active { background: linear-gradient(135deg, #5ac8fa, #43d1c4); color: #0b1020; }
.sort-wrap { display: flex; align-items: stretch; justify-content: center; min-width: 156px; height: 44px; }
.sort-group { display: inline-flex; gap: 6px; align-items: stretch; height: 100%; }
.sort-btn { width: 44px; height: 100%; padding: 8px; border-radius: 8px; border: 1px solid #2b3755; background: #0f1628; color: #e8ecf1; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, filter 0.2s ease; }
.sort-btn svg { width: 16px; height: 16px; fill: currentColor; }
.sort-btn.active { background: linear-gradient(135deg, #3aa7d6, #48c7c4); color: #0b1020; border: none; }
.sort-btn:hover { filter: brightness(1.05); }
    .card-footer { margin-top: 2px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
    .card-actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
    .pending-card { filter: grayscale(0.7); opacity: 0.7; }
    .pending-card .thumb { filter: grayscale(0.8); }
    .expired-card { background: #1c1118; border-color: #3b1f2d; }
    .expired-card .thumb { filter: grayscale(0.4); }
.avatar-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.avatar-btn { width: 40px; height: 40px; border-radius: 999px; background: linear-gradient(135deg, #5ac8fa, #43d1c4); box-shadow: 0 4px 12px rgba(67,209,196,0.35); cursor: pointer; border: 1px solid #2b3755; display: inline-flex; align-items: center; justify-content: center; color: #0b1020; font-weight: 700; position: relative; z-index: 1401; }
.avatar-menu { position: absolute; top: 48px; right: 0; background: #12182c; border: 1px solid #1f2a47; border-radius: 10px; padding: 8px; box-shadow: 0 10px 24px rgba(0,0,0,0.4); min-width: 140px; z-index: 1400; }
    .avatar-menu button { width: 100%; text-align: left; }
    .progress-bar { width: 100%; height: 10px; background: #0f1f2c; border: 1px solid #1f2a47; border-radius: 999px; overflow: hidden; }
    .progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #43d1c4, #5ac8fa); transition: width 0.2s ease; }
    .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: none; align-items: center; justify-content: center; z-index: 1100; }
    .modal { background: #12182c; border: 1px solid #1f2a47; border-radius: 10px; padding: 16px; width: 360px; max-width: 90vw; }
    .modal h4 { margin: 0 0 8px; }
    .modal .meta { margin-bottom: 6px; }
    @media (max-width: 768px) {
      body { padding-top: 0; }
      header { align-items: flex-start; padding-left: 8px; padding-right: 8px; }
      .app-bar { gap: 8px; }
      .app-title { display: none; }
      .app-logo { display: inline-flex; }
      .header-search { flex: 1 1 auto; min-width: 0; max-width: none; width: auto; }
      .avatar-btn { width: 36px; height: 36px; }
      :root { --tab-offset: 66px; }
    }
  

.active-alert {
  background: linear-gradient(135deg, #f5c452, #f7da92);
  color: #0b1020;
  border: none;
  box-shadow: 0 0 10px rgba(245,196,82,0.4);
}
.active-alert:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 14px rgba(245,196,82,0.6);
}