.app-view {
  min-height:100dvh;
  background:radial-gradient(circle at 88% -4%,rgba(247,217,139,.085),transparent 24%),linear-gradient(180deg,#070806 0,#030302 100%)
}
.app-header {
  position:fixed;
  z-index:30;
  top:0;
  left:0;
  right:0;
  height:calc(78px + var(--safe-top));
  padding:var(--safe-top) 18px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:linear-gradient(180deg,rgba(3,3,2,.98),rgba(3,3,2,.88),rgba(3,3,2,0));
  backdrop-filter:blur(12px)
}
.header-brand {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0
}
.header-brand img {
  width:88px;
  height:48px;
  object-fit:contain;
  object-position:left center
}
.header-brand div {
  padding-left:10px;
  border-left:1px solid var(--line)
}
.header-brand p {
  margin:0;
  color:var(--gold);
  font-size:8px;
  font-weight:800;
  letter-spacing:1.1px
}
.header-brand strong {
  display:block;
  margin-top:2px;
  font-size:13px;
  white-space:nowrap
}
.header-alert {
  position:relative;
  width:44px;
  height:44px;
  border-radius:15px;
  border:1px solid var(--line-soft);
  background:rgba(255,255,255,.035);
  color:var(--champagne);
  display:grid;
  place-items:center
}
.alert-badge {
  position:absolute;
  right:-2px;
  top:-4px;
  min-width:18px;
  height:18px;
  padding:0 4px;
  border-radius:9px;
  display:grid;
  place-items:center;
  background:var(--danger);
  color:#210202;
  font-size:9px;
  font-weight:900
}
.app-main {
  padding-top:calc(84px + var(--safe-top));
  padding-bottom:calc(92px + var(--safe-bottom));
  min-height:100dvh
}
.page {
  width:min(100%,720px);
  margin:0 auto;
  padding:18px 16px 24px;
  animation:pageIn .24s ease
}
.page[hidden] {
  display:none!important
}
@keyframes pageIn {
  from {
    opacity:0;
    transform:translateY(8px)
  }
  to {
    opacity:1;
    transform:none
  }
  
}
.welcome-block,.page-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:15px;
  margin-bottom:18px
}
.welcome-block h1,.page-heading h1 {
  margin:0;
  font-size:clamp(27px,7vw,38px);
  line-height:1.08;
  letter-spacing:-.8px
}
.welcome-block h1 span {
  font-family:"Great Vibes",cursive;
  font-size:1.35em;
  font-weight:400;
  color:var(--gold);
  letter-spacing:0
}
.welcome-block>div>p:last-child,.page-heading>div>p:last-child {
  margin:7px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.45
}
.soft-button {
  width:42px;
  height:42px;
  flex:0 0 auto;
  border-radius:14px;
  border:1px solid var(--line-soft);
  background:rgba(255,255,255,.035);
  color:var(--gold);
  display:grid;
  place-items:center
}
.soft-button.loading .icon {
  animation:spin .8s linear infinite
}
.summary-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px
}
.summary-card {
  min-height:126px;
  padding:15px;
  border-radius:20px;
  border:1px solid var(--line-soft);
  background:linear-gradient(145deg,rgba(19,20,18,.96),rgba(8,9,8,.92));
  box-shadow:0 14px 32px rgba(0,0,0,.25);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  color:var(--text);
  cursor:pointer
}
.summary-card.gold-card {
  border-color:rgba(247,217,139,.35);
  background:radial-gradient(circle at 90% 8%,rgba(247,217,139,.15),transparent 38%),linear-gradient(145deg,rgba(26,24,18,.98),rgba(8,8,6,.94))
}
.summary-card span {
  font-size:11px;
  color:var(--muted);
  line-height:1.3
}
.summary-card strong {
  margin-top:auto;
  color:var(--gold);
  font-size:30px;
  line-height:1
}
.summary-card small {
  margin-top:9px;
  color:var(--champagne);
  font-size:9px
}
.section-block {
  margin-top:26px
}
.compact-section {
  margin-bottom:6px
}
.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px
}
.section-heading h2 {
  margin:0;
  font-size:18px
}
.text-button {
  padding:6px 0;
  background:transparent;
  color:var(--gold);
  font-size:10px;
  font-weight:700
}
.list-stack {
  display:grid;
  gap:10px
}
.list-stack.roomy {
  gap:12px
}
.empty-state,.error-state,.loading-state {
  min-height:126px;
  padding:24px 18px;
  border-radius:20px;
  border:1px dashed var(--line-soft);
  display:grid;
  place-items:center;
  text-align:center;
  background:rgba(255,255,255,.018)
}
.empty-state strong,.error-state strong {
  display:block;
  font-size:14px
}
.empty-state p,.error-state p {
  max-width:320px;
  margin:7px 0 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.5
}
.error-state {
  border-color:rgba(255,142,142,.28)
}
.error-state strong {
  color:var(--danger)
}
.loading-state span {
  width:28px;
  height:28px;
  border:2px solid rgba(247,217,139,.14);
  border-right-color:var(--gold);
  border-radius:50%;
  animation:spin .8s linear infinite
}