/* Live project replicas. Each window mimics its real platform. */
.show-title { margin-top: 4rem; }

.tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-bottom: 1.25rem; }
.tab {
  text-align: left; cursor: pointer; font: inherit; color: var(--steel);
  background: transparent; border: 1px solid var(--line); border-radius: 14px; padding: .85rem 1rem;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.tab b { display: block; color: var(--ink); font-weight: 600; }
.tab span { font: 400 .8rem var(--mono); }
.tab:hover { transform: translateY(-2px); border-color: var(--ink); }
.tab.is-active { background: var(--ink); border-color: var(--ink); }
.tab.is-active b { color: var(--white); }
.tab.is-active span { color: #56e3e8; }

.stage { position: relative; }
.demo { animation: demo-in .45s cubic-bezier(.2,.7,.2,1); }
@keyframes demo-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }

/* ---------- Window chrome ---------- */
.win {
  position: relative; background: var(--white); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(11, 22, 32, .35);
}
.win-bar { display: flex; align-items: center; gap: 1rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line); background: #eef1f3; }
.dots { display: flex; gap: 6px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.dots i:nth-child(2) { background: #febc2e; }
.dots i:nth-child(3) { background: #28c840; }
.win-url { font: 400 .78rem var(--mono); color: var(--steel); background: var(--white); padding: .25rem .8rem; border-radius: 999px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ---------- Generic app layout ---------- */
.app { display: grid; grid-template-columns: 190px 1fr; min-height: 380px; font-size: .9rem; }
.side { background: var(--ink); color: #c7d0d6; padding: 1rem .75rem; display: flex; flex-direction: column; gap: .25rem; }
.side-logo { display: flex; align-items: center; gap: .6rem; color: var(--white); font-weight: 600; margin: 0 .25rem 1rem; }
.logo-box { width: 26px; height: 26px; border-radius: 7px; background: #56e3e8; color: var(--ink); display: grid; place-items: center; font-weight: 700; }
.side-item {
  font: inherit; text-align: left; color: inherit; background: none; border: 0; cursor: pointer;
  padding: .55rem .75rem; border-radius: 8px; transition: background .15s, color .15s;
}
.side-item:hover { background: rgba(255,255,255,.07); color: var(--white); }
.side-item.is-active { background: rgba(86,227,232,.14); color: #56e3e8; }
.side-user { margin-top: auto; font-size: .78rem; color: #7d8b94; padding: 0 .75rem; }
.main { padding: 1.25rem; overflow: hidden; }
.view { display: none; }
.view.is-active { display: block; animation: demo-in .35s ease; }
.view-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.mini-btn { font: 500 .82rem var(--sans); border: 0; border-radius: 8px; padding: .5rem .8rem; cursor: pointer; background: var(--ink); color: var(--white); transition: transform .15s; }
.mini-btn:active { transform: scale(.95); }
.mini-btn.accent { background: #56e3e8; color: var(--ink); }

.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-bottom: .75rem; }
.kpi, .card { border: 1px solid var(--line); border-radius: 12px; padding: .9rem; }
.kpi small { display: block; color: var(--steel); }
.kpi b { font: 600 1.6rem/1.2 var(--sans); font-variant-numeric: tabular-nums; }
.card-head { color: var(--steel); margin-bottom: .75rem; }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 150px; }
.bars i { flex: 1; height: var(--h); background: var(--ink); border-radius: 5px 5px 0 0; transform: scaleY(0); transform-origin: bottom; }
.bars i:last-child { background: var(--cyan); }
.is-playing .bars i { animation: grow .8s cubic-bezier(.2,.8,.2,1) forwards; }
.bars i:nth-child(n) { animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes grow { to { transform: scaleY(1); } }

.table-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; white-space: nowrap; }
.tbl th { text-align: left; color: var(--steel); font-weight: 500; padding: .5rem; border-bottom: 1px solid var(--line); }
.tbl td { padding: .6rem .5rem; border-bottom: 1px solid var(--line); }
.tbl tr.new { animation: row-in .6s ease; }
@keyframes row-in { from { opacity: 0; transform: translateX(-12px); background: #dff8f9; } }
.pill { display: inline-block; font-size: .75rem; padding: .15rem .55rem; border-radius: 999px; font-weight: 500; }
.pill.ok { background: #dcf5e6; color: #146c3b; }
.pill.go { background: #dff3f5; color: #0a6f77; }
.pill.wait { background: #fbeedd; color: #9a5a17; }

.sup { display: grid; grid-template-columns: 90px 1fr 40px; gap: .75rem; align-items: center; padding: .55rem 0; }
.sup em { font-style: normal; color: var(--steel); text-align: right; }
.meter { height: 8px; background: #edf0f2; border-radius: 99px; overflow: hidden; }
.meter i { display: block; height: 100%; width: var(--w); background: var(--ink); border-radius: 99px; animation: fill 1s cubic-bezier(.2,.8,.2,1); }
@keyframes fill { from { width: 0; } }

/* ---------- Planner (dark Next.js app) ---------- */
.win-dark { background: #0f1720; border-color: #1f2a35; color: #dce3e8; }
.win-dark .win-bar { background: #0b1118; border-color: #1f2a35; }
.win-dark .win-url { background: #16202a; color: #8a98a3; }
.planner .side { background: #0b1118; border-right: 1px solid #1f2a35; }
.grid-wrap { overflow-x: auto; }
.heat { display: grid; grid-template-columns: 90px repeat(8, minmax(34px, 1fr)); gap: 4px; min-width: 420px; font-size: .78rem; }
.heat .lbl { color: #8a98a3; display: flex; align-items: center; }
.heat .wk { color: #8a98a3; text-align: center; }
.heat .cell { height: 30px; border-radius: 6px; background: #1b2631; transition: background .3s, transform .3s; }
.heat .cell.c1 { background: #e0645c; }
.heat .cell.c2 { background: #e6b04a; }
.heat .cell.c3 { background: #2fb8a4; }
.heat .cell.pop { transform: scale(1.12); }
.legend { display: flex; gap: 1rem; margin-top: 1rem; font-size: .78rem; color: #8a98a3; flex-wrap: wrap; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; }
.legend .c1 { background: #e0645c; } .legend .c2 { background: #e6b04a; } .legend .c3 { background: #2fb8a4; }
.po-list { display: grid; gap: .6rem; }
.po { display: grid; grid-template-columns: 80px 1fr auto; gap: 1rem; align-items: center; background: #16202a; border: 1px solid #1f2a35; border-radius: 10px; padding: .75rem 1rem; }
.po.new { animation: row-in .6s ease; }
.win-dark .pill.wait { background: #3a2c14; color: #f0c270; }
.toast {
  position: absolute; right: 1rem; bottom: 1rem; background: #56e3e8; color: var(--ink);
  font-weight: 600; padding: .7rem 1rem; border-radius: 10px; transform: translateY(150%); transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.toast.show { transform: translateY(0); }

/* ---------- Excel ---------- */
.win-excel { font-family: "Segoe UI", Calibri, system-ui, sans-serif; font-size: .85rem; }
.xl-title { background: #1d6f42; color: #fff; text-align: center; padding: .45rem; font-size: .82rem; }
.xl-ribbon { display: flex; gap: 1.2rem; padding: .4rem 1rem 0; background: #f3f3f3; }
.xl-ribbon span { padding-bottom: .35rem; color: #444; }
.xl-ribbon .on { color: #1d6f42; font-weight: 600; border-bottom: 2px solid #1d6f42; }
.xl-tools { display: flex; gap: .5rem; padding: .6rem 1rem; background: #fafafa; border-bottom: 1px solid #d4d4d4; flex-wrap: wrap; }
.xl-btn { font: inherit; background: #fff; border: 1px solid #c8c8c8; border-radius: 4px; padding: .35rem .8rem; cursor: pointer; transition: background .1s; }
.xl-btn.press { background: #cfe6d8; border-color: #1d6f42; }
.xl-sheet { position: relative; overflow-x: auto; min-height: 280px; }
.xl { border-collapse: collapse; width: 100%; min-width: 560px; }
.xl th { background: #efefef; color: #555; font-weight: 400; border: 1px solid #d4d4d4; padding: .2rem .5rem; width: 34px; }
.xl td { border: 1px solid #e1e1e1; padding: .3rem .5rem; white-space: nowrap; }
.xl .xl-head td { font-weight: 700; background: #e8f3ec; }
.xl tr.new td { animation: xl-flash 1.6s ease; }
@keyframes xl-flash { 0%, 40% { background: #cfe6d8; } }
.uf {
  position: absolute; top: 18px; left: 50%; width: min(300px, 90%); transform: translate(-50%, 10px) scale(.96);
  background: #f0f0f0; border: 1px solid #8a8a8a; box-shadow: 0 12px 30px rgba(0,0,0,.25);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.uf.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.uf-title { display: flex; justify-content: space-between; background: #fff; padding: .4rem .6rem; border-bottom: 1px solid #ccc; }
.uf-body { padding: .7rem .8rem; display: grid; gap: .45rem; }
.uf-body label { display: grid; grid-template-columns: 80px 1fr; align-items: center; }
.uf-in { background: #fff; border: 1px solid #a8a8a8; min-height: 1.6em; padding: .1rem .4rem; }
.uf-in.typing::after { content: "|"; animation: blink 1s steps(1) infinite; }
.uf-total { background: #e8f3ec; font-weight: 700; }
.uf-btns { display: flex; justify-content: flex-end; gap: .4rem; margin-top: .3rem; }
.uf-btns button { font: inherit; padding: .2rem .9rem; background: #e1e1e1; border: 1px solid #adadad; }
.uf-btns button.press { background: #cce4f7; border-color: #0078d4; }
.xl-status { background: #1d6f42; color: #fff; padding: .25rem 1rem; font-size: .78rem; }

/* ---------- n8n ---------- */
.flow-count { margin-left: auto; font-size: .8rem; color: var(--steel); white-space: nowrap; }
.flow-count b { color: var(--ink); font-variant-numeric: tabular-nums; }
.flow-wrap { overflow-x: auto; }
.flow { display: block; width: 100%; min-width: 640px; height: auto; }
.wires path { fill: none; stroke: #b9c3ca; stroke-width: 2; }
.node rect { fill: var(--white); stroke: #b9c3ca; stroke-width: 1.5; transition: stroke .2s, fill .2s; }
.node text { font: 500 12px var(--sans); fill: var(--ink); text-anchor: middle; }
.node.on rect { stroke: var(--cyan); stroke-width: 2.5; fill: #e9fbfb; }
.node.done rect { stroke: #2fa36b; }
#packets circle { fill: var(--cyan); }
.flow-log { border-top: 1px solid var(--line); padding: .6rem 1rem; height: 96px; overflow: hidden; font: 400 .78rem/1.6 var(--mono); color: var(--steel); }
.flow-log div { animation: row-in .3s ease; }
.flow-log .ok { color: #2fa36b; }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .tabs { grid-template-columns: 1fr 1fr; }
  .app { grid-template-columns: 1fr; }
  .side { flex-direction: row; flex-wrap: wrap; align-items: center; padding: .6rem; }
  .side-logo { margin: 0 .5rem 0 0; }
  .side-user { display: none; }
  .kpis { grid-template-columns: 1fr 1fr 1fr; gap: .4rem; }
  .kpi { padding: .6rem; }
  .kpi b { font-size: 1.1rem; }
  .kpi small { font-size: .7rem; }
  .main { padding: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .demo, .view.is-active, .tbl tr.new, .po.new, .flow-log div { animation: none; }
  .bars i { transform: none; animation: none !important; }
  .meter i { animation: none; }
}