#app-status-banner{display:none;padding:0 0 18px;position:relative;z-index:40}
#app-status-banner.show{display:block}
.status-banner{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(124,158,255,.24);
  background:
    radial-gradient(circle at top left, rgba(124,158,255,.16), transparent 34%),
    linear-gradient(135deg, rgba(24,33,49,.96), rgba(18,23,34,.94));
  border-radius:20px;
  padding:16px 18px;
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  box-shadow:
    0 0 0 1px rgba(124,158,255,.05),
    0 14px 34px rgba(0,0,0,.18),
    0 0 30px rgba(124,158,255,.08);
}
.status-banner::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(124,158,255,.10), transparent 20%, transparent 78%, rgba(105,213,160,.06));
}
.status-banner::after{
  content:'';
  position:absolute;
  left:0;
  top:14px;
  bottom:14px;
  width:4px;
  border-radius:0 999px 999px 0;
  background:linear-gradient(180deg, rgba(124,158,255,.98), rgba(105,213,160,.85));
  box-shadow:0 0 18px rgba(124,158,255,.35);
}
.status-banner.warning{
  border-color:rgba(255,209,102,.26);
  background:
    radial-gradient(circle at top left, rgba(255,209,102,.14), transparent 34%),
    linear-gradient(135deg, rgba(24,33,49,.96), rgba(18,23,34,.94));
}
.status-banner.warning::after{
  background:linear-gradient(180deg, rgba(255,209,102,.96), rgba(255,138,101,.82));
  box-shadow:0 0 18px rgba(255,209,102,.34);
}
.status-banner.danger{
  border-color:rgba(255,107,138,.30);
  background:
    radial-gradient(circle at top left, rgba(255,107,138,.16), transparent 34%),
    linear-gradient(135deg, rgba(27,26,40,.96), rgba(18,23,34,.95));
  box-shadow:
    0 0 0 1px rgba(255,107,138,.06),
    0 18px 42px rgba(0,0,0,.22),
    0 0 34px rgba(255,107,138,.10);
}
.status-banner.danger::after{
  background:linear-gradient(180deg, rgba(255,107,138,.98), rgba(212,170,255,.82));
  box-shadow:0 0 18px rgba(255,107,138,.42);
}
.status-banner.success{
  border-color:rgba(105,213,160,.24);
  background:
    radial-gradient(circle at top left, rgba(105,213,160,.14), transparent 34%),
    linear-gradient(135deg, rgba(24,33,49,.96), rgba(18,23,34,.94));
}
.status-banner.success::after{
  background:linear-gradient(180deg, rgba(105,213,160,.96), rgba(124,158,255,.82));
  box-shadow:0 0 18px rgba(105,213,160,.34);
}
.status-banner-left{
  min-width:0;
  position:relative;
  z-index:1;
  flex:1;
  padding-left:4px;
}
.status-banner-kicker{
  font-size:10px;
  color:var(--text3);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-family:'DM Mono',monospace;
  margin-bottom:6px;
}
.status-banner-title{
  font-size:15px;
  font-weight:700;
  color:var(--text);
  line-height:1.35;
}
.status-banner-copy{
  margin-top:4px;
  font-size:13px;
  line-height:1.55;
  color:var(--text2);
  max-width:980px;
}
.status-banner-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  position:relative;
  z-index:1;
  flex-shrink:0;
}
.status-mini-btn{
  background:var(--bg3);
  border:1px solid rgba(255,255,255,.08);
  color:var(--text);
  border-radius:12px;
  padding:10px 14px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  min-height:40px;
  box-shadow:0 8px 18px rgba(0,0,0,.14);
}
.status-mini-btn:hover{transform:translateY(-1px)}
.status-mini-btn.primary{
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 72%, #fff 28%));
  border-color:transparent;
  color:#0D1320;
}
.status-mini-btn.ghost{background:rgba(255,255,255,.04)}
#app-status-modal-overlay{
  z-index:280;
  background:rgba(5,8,14,.76);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.status-modal{
  background:
    radial-gradient(circle at top left, rgba(124,158,255,.18), transparent 30%),
    radial-gradient(circle at bottom right, rgba(105,213,160,.08), transparent 36%),
    linear-gradient(145deg,#171f2d,#111722 70%);
  border:1px solid rgba(124,158,255,.20);
  border-radius:26px 26px 0 0;
  padding:26px 24px calc(24px + var(--safe-bottom));
  width:100%;
  max-width:560px;
  animation:sheetUp .25s ease;
  position:relative;
  box-shadow:
    0 0 0 1px rgba(124,158,255,.06),
    0 24px 80px rgba(0,0,0,.42),
    0 0 50px rgba(124,158,255,.10);
}
.status-modal::before{
  content:'';
  position:absolute;
  left:0;
  top:20px;
  bottom:20px;
  width:5px;
  border-radius:0 999px 999px 0;
  background:linear-gradient(180deg, rgba(255,107,138,.98), rgba(212,170,255,.82));
  box-shadow:0 0 20px rgba(255,107,138,.42);
}
.status-modal .modal-handle{margin-bottom:16px}
.status-modal .close-btn{
  top:18px;
  right:18px;
  width:40px;
  height:40px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}
.status-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,107,138,.12);
  border:1px solid rgba(255,107,138,.22);
  font-size:11px;
  color:#ffb4c3;
  font-family:'DM Mono',monospace;
  margin-bottom:12px;
}
.status-pill::before{
  content:'';
  width:8px;
  height:8px;
  border-radius:999px;
  background:#FF6B8A;
  box-shadow:0 0 14px rgba(255,107,138,.7);
}
.status-modal-title{
  font-size:26px;
  font-weight:700;
  letter-spacing:-.03em;
  color:var(--text);
  margin-bottom:8px;
  padding-right:28px;
  line-height:1.12;
}
.status-modal-copy{
  font-size:14px;
  line-height:1.68;
  color:var(--text2);
}
.status-modal-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:20px;
}
.status-modal .btn-add,
.status-modal .secondary-btn{
  min-height:46px;
  border-radius:14px;
  padding:0 16px;
}
@media (max-width:720px){
  #app-status-banner{padding:0 0 14px}
  .status-banner{flex-direction:column;align-items:flex-start;padding:15px 15px 14px}
  .status-banner-actions{justify-content:flex-start;width:100%}
  .status-mini-btn{flex:0 0 auto}
}