/* AA-style cinematic shell for demo apps */
body.demo-pro{
  background:
    radial-gradient(1200px 500px at -10% -20%, rgba(200,245,90,0.09), transparent 60%),
    radial-gradient(900px 420px at 120% -10%, rgba(255,107,53,0.12), transparent 55%),
    linear-gradient(180deg, #0f1318 0%, #131922 65%, #10151c 100%);
  color:#e9edf4;
}

body.demo-pro.page-enter{
  animation:demoFadeIn .45s ease-out both;
}

body.demo-pro.page-exit{
  animation:demoFadeOut .28s ease-in both;
}

@keyframes demoFadeIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes demoFadeOut{
  from{opacity:1;transform:translateY(0)}
  to{opacity:0;transform:translateY(5px)}
}

body.demo-pro::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size:26px 26px;
  pointer-events:none;
  z-index:0;
}

/* Light-mode overrides for cinematic demos */
body.demo-pro:not(.theme-dark){
  background:
    radial-gradient(1200px 500px at -10% -20%, rgba(200,245,90,0.20), transparent 60%),
    radial-gradient(900px 420px at 120% -10%, rgba(255,107,53,0.18), transparent 55%),
    linear-gradient(180deg, #eef3fb 0%, #e9eff8 65%, #e5ecf6 100%);
  color:#1a2433;
}

body.demo-pro:not(.theme-dark)::before{
  background:
    linear-gradient(rgba(24,38,56,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24,38,56,0.06) 1px, transparent 1px);
  background-size:26px 26px;
}

body.demo-pro:not(.theme-dark) nav{
  background:rgba(240,246,255,0.88);
  border-bottom:1px solid rgba(101,122,151,0.30);
}

body.demo-pro:not(.theme-dark) .panel,
body.demo-pro:not(.theme-dark) .card,
body.demo-pro:not(.theme-dark) .hero{
  background:linear-gradient(160deg, rgba(255,255,255,0.92), rgba(243,248,255,0.90)) !important;
  border:1px solid rgba(110,132,162,0.32) !important;
  box-shadow:0 14px 34px rgba(18,35,62,0.10);
}

body.demo-pro:not(.theme-dark) .mini,
body.demo-pro:not(.theme-dark) .stat,
body.demo-pro:not(.theme-dark) .col,
body.demo-pro:not(.theme-dark) .task,
body.demo-pro:not(.theme-dark) .deal,
body.demo-pro:not(.theme-dark) .q,
body.demo-pro:not(.theme-dark) .rank,
body.demo-pro:not(.theme-dark) .app-tile{
  background:rgba(255,255,255,0.95) !important;
  border:1px solid rgba(116,138,168,0.30) !important;
  color:#152030 !important;
}

body.demo-pro:not(.theme-dark) .mini b,
body.demo-pro:not(.theme-dark) .stat b,
body.demo-pro:not(.theme-dark) .k,
body.demo-pro:not(.theme-dark) .k-value,
body.demo-pro:not(.theme-dark) .calc-big,
body.demo-pro:not(.theme-dark) .calc-sub,
body.demo-pro:not(.theme-dark) .n{
  color:#0f1d33 !important;
}

body.demo-pro:not(.theme-dark) .line,
body.demo-pro:not(.theme-dark) .rowx,
body.demo-pro:not(.theme-dark) .r,
body.demo-pro:not(.theme-dark) th,
body.demo-pro:not(.theme-dark) td{
  color:#1b2a3d !important;
}

body.demo-pro:not(.theme-dark) .line.total{
  color:#0d1a2d !important;
}

body.demo-pro:not(.theme-dark) .tag,
body.demo-pro:not(.theme-dark) .badge,
body.demo-pro:not(.theme-dark) .rank-badge{
  background:rgba(240,246,255,0.98) !important;
  color:#1c2d45 !important;
  border-color:rgba(116,138,168,0.34) !important;
}

body.demo-pro:not(.theme-dark) .eyebrow,
body.demo-pro:not(.theme-dark) .m,
body.demo-pro:not(.theme-dark) label,
body.demo-pro:not(.theme-dark) .meta,
body.demo-pro:not(.theme-dark) .foot,
body.demo-pro:not(.theme-dark) .k-sub{
  color:#4e6686 !important;
}

body.demo-pro:not(.theme-dark) input,
body.demo-pro:not(.theme-dark) select,
body.demo-pro:not(.theme-dark) textarea{
  background:#f7fbff !important;
  border:1px solid rgba(116,138,168,0.38) !important;
  color:#122238 !important;
}

body.demo-pro:not(.theme-dark) .doc,
body.demo-pro:not(.theme-dark) #output,
body.demo-pro:not(.theme-dark) textarea[readonly]{
  background:rgba(250,253,255,0.98) !important;
  border:1px solid rgba(116,138,168,0.40) !important;
  color:#102238 !important;
}

body.demo-pro:not(.theme-dark) .btn{
  background:#f4f8ff !important;
  border-color:rgba(116,138,168,0.40) !important;
  color:#0f2139 !important;
}

body.demo-pro:not(.theme-dark) .btn.prime{
  background:linear-gradient(90deg, #a8de35, #95d024) !important;
  color:#0d1a2d !important;
}

body.demo-pro:not(.theme-dark) .hud-chip{
  border-color:rgba(116,138,168,0.45);
  background:rgba(246,250,255,0.90);
  color:#1a2c45;
}

body.demo-pro nav,
body.demo-pro .app,
body.demo-pro .wrap{
  position:relative;
  z-index:1;
}

body.demo-pro nav{
  background:rgba(12,16,22,0.82);
  border-bottom:1px solid rgba(146,163,187,0.24);
}

body.demo-pro .panel,
body.demo-pro .card,
body.demo-pro .hero{
  background:linear-gradient(160deg, rgba(29,36,48,0.86), rgba(20,26,36,0.82)) !important;
  border:1px solid rgba(131,149,176,0.32) !important;
  box-shadow:0 14px 40px rgba(0,0,0,0.28);
  backdrop-filter:blur(8px);
}

/* Ensure metric tiles and compact cards stay readable */
body.demo-pro .mini,
body.demo-pro .stat,
body.demo-pro .col,
body.demo-pro .task,
body.demo-pro .deal,
body.demo-pro .q,
body.demo-pro .rank,
body.demo-pro .app-tile{
  background:rgba(18,24,34,0.92) !important;
  border:1px solid rgba(131,149,176,0.34) !important;
  color:#e9edf4 !important;
}

body.demo-pro .mini b,
body.demo-pro .stat b,
body.demo-pro .k,
body.demo-pro .k-value,
body.demo-pro .calc-big,
body.demo-pro .calc-sub,
body.demo-pro .n{
  color:#f4f7ff !important;
}

body.demo-pro .line,
body.demo-pro .rowx,
body.demo-pro .r,
body.demo-pro th,
body.demo-pro td{
  color:#dfe6f6 !important;
}

body.demo-pro .line.total{
  color:#ffffff !important;
}

body.demo-pro .tag,
body.demo-pro .badge,
body.demo-pro .rank-badge{
  background:rgba(23,31,44,0.95) !important;
  color:#dbe6fb !important;
  border-color:rgba(131,149,176,0.38) !important;
}

body.demo-pro .eyebrow,
body.demo-pro .m,
body.demo-pro label,
body.demo-pro .meta,
body.demo-pro .foot,
body.demo-pro .k-sub{
  color:#98a6bd !important;
}

body.demo-pro input,
body.demo-pro select,
body.demo-pro textarea{
  background:#0f141d !important;
  border:1px solid rgba(131,149,176,0.34) !important;
  color:#e9edf4 !important;
}

body.demo-pro .doc,
body.demo-pro #output,
body.demo-pro textarea[readonly]{
  background:rgba(16,22,32,0.96) !important;
  border:1px solid rgba(131,149,176,0.36) !important;
  color:#eef3ff !important;
}

body.demo-pro textarea::placeholder,
body.demo-pro input::placeholder{
  color:#8fa1bd !important;
  opacity:1;
}

body.demo-pro input[readonly]{
  color:#f0f5ff !important;
  font-weight:600;
}

body.demo-pro .btn.prime{
  background:linear-gradient(90deg, #c8f55a, #b3ef36) !important;
  color:#10151c !important;
  border-color:transparent !important;
}

body.demo-pro .btn{
  background:rgba(23,30,41,0.9) !important;
  border-color:rgba(131,149,176,0.38) !important;
  color:#e9edf4 !important;
}

.demo-hud{
  position:relative;
  z-index:1;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  margin:12px auto 0;
  padding:0 20px;
  max-width:1280px;
}

.demo-hud-left,.demo-hud-right{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.hud-chip{
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid rgba(139,158,186,0.45);
  background:rgba(14,19,27,0.85);
  color:#dbe5f7;
}

.hud-chip.btn{
  cursor:pointer;
  user-select:none;
  transition:transform .15s,border-color .2s;
}

.hud-chip.btn:hover{
  transform:translateY(-1px);
  border-color:rgba(200,245,90,.65);
}

.hud-chip.green{
  border-color:rgba(130,215,66,0.6);
  color:#cbf78a;
}

.hud-chip.orange{
  border-color:rgba(255,153,89,0.6);
  color:#ffc39f;
}

.hud-chip .dot{
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#86d842;
  margin-right:6px;
  box-shadow:0 0 0 0 rgba(134,216,66,0.55);
  animation:hudPulse 2s infinite;
}

@keyframes hudPulse{
  0%{box-shadow:0 0 0 0 rgba(134,216,66,0.55)}
  70%{box-shadow:0 0 0 8px rgba(134,216,66,0)}
  100%{box-shadow:0 0 0 0 rgba(134,216,66,0)}
}

@media(max-width:820px){
  .demo-hud{padding:0 12px}
}

/* ── DemoFX: value flash, bar grow, drag-drop, presets ── */
@keyframes valueFlashGreen{
  0%,100%{color:inherit;text-shadow:none;transform:scale(1)}
  40%{color:#86d842;text-shadow:0 0 14px rgba(134,216,66,.55);transform:scale(1.07)}
}
@keyframes valueFlashRed{
  0%,100%{color:inherit;text-shadow:none;transform:scale(1)}
  40%{color:#ff6b6b;text-shadow:0 0 14px rgba(255,107,107,.55);transform:scale(1.07)}
}
.value-flash{animation:valueFlashGreen 500ms ease}
.value-flash-danger{animation:valueFlashRed 500ms ease}

@keyframes criticalPulse{
  0%,100%{color:#ff6b6b;text-shadow:0 0 0 rgba(255,80,80,0)}
  50%{color:#ff4040;text-shadow:0 0 10px rgba(255,80,80,.45)}
}
.critical-warning{animation:criticalPulse 900ms ease infinite;font-weight:800!important}
.risk-critical{border-color:#ff6b6b!important;background:rgba(255,80,80,.12)!important;color:#ffb4b4!important}

@keyframes barGrow{
  from{transform:scaleY(0);opacity:.35}
  to{transform:scaleY(1);opacity:1}
}
.bar-grow{transform-origin:bottom;animation:barGrow 620ms cubic-bezier(.22,.8,.32,1) forwards}

.sidebar .stat b.risk-low{color:#ff6b6b!important}

.demo-preset-chip{
  display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 12px;
  border-radius:999px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid rgba(139,158,186,0.45);background:rgba(14,19,27,0.85);color:#dbe5f7;
}
.demo-preset-chip select{
  background:rgba(10,14,20,.9);border:1px solid rgba(139,158,186,0.35);color:#e9edf4;
  border-radius:999px;padding:4px 8px;font-size:11px;cursor:pointer;text-transform:none;letter-spacing:0;
}
body.demo-pro:not(.theme-dark) .demo-preset-chip{
  background:rgba(246,250,255,0.90);color:#1a2c45;border-color:rgba(116,138,168,0.45);
}
body.demo-pro:not(.theme-dark) .demo-preset-chip select{
  background:#f7fbff;color:#122238;border-color:rgba(116,138,168,0.38);
}

.deal{cursor:grab;transition:transform .15s,box-shadow .15s}
.deal:active{cursor:grabbing}
.deal.dragging{opacity:.45;transform:scale(.97)}
.col.drop-target{border-color:rgba(200,245,90,.7)!important;background:rgba(200,245,90,.08)!important}
.deal.drop-success{animation:valueFlashGreen 500ms ease}

.demo-floating-cta{
  position:fixed;right:20px;bottom:20px;z-index:120;
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(90deg,#c8f55a,#b3ef36);color:#10151c;
  text-decoration:none;padding:12px 18px;border-radius:999px;
  font-size:13px;font-weight:700;box-shadow:0 12px 32px rgba(200,245,90,.28);
  transition:transform .15s,box-shadow .15s;
}
.demo-floating-cta:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(200,245,90,.38)}
@media(max-width:820px){.demo-floating-cta{right:12px;bottom:12px;font-size:12px;padding:10px 14px}}