/* v5: gadgets, true-scale charts, P2P official sources + delta pipeline, AI fleet, XiVault timeline */
:root { --c-before: #eb6834; --c-after: #2a78d6; }
:root[data-theme="dark"] { --c-before: #e0622e; --c-after: #3f86dc; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-before: #e0622e; --c-after: #3f86dc; } }

.sub-h { font-size: 22px; margin: 34px 0 6px; font-weight: 600; }
.mini-h { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 0 0 10px; }
:lang(ar) .mini-h { text-transform: none; letter-spacing: 0; font-size: 14px; }
.src { font-size: 13px; color: var(--muted); margin: 10px 0 0; }

/* Gadgets */
.gadgets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gadget { --c: #5fd4b8; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px 20px; }
.gadget svg { width: 100%; height: auto; display: block; margin-bottom: 8px; direction: ltr; }
.gadget strong { font-size: 24px; color: #5fd4b8; display: block; }
.gadget p { margin: 4px 0 0; color: var(--muted); font-size: 14.5px; }
.g-body { fill: #2b3638; stroke: #4a5a57; stroke-width: 1.5; } .g-screen { fill: #0f1626; } .g-base { fill: #3a4648; } .g-hub { fill: #4a5a57; }
.g-track { fill: #26324a; } .g-fill { fill: #5fd4b8; } .g-t { fill: #b6c0ba; font-size: 12px; font-family: inherit; } .g-accent { fill: #5fd4b8; font-weight: 700; }
.g-strike { text-decoration: line-through; fill: #e0622e; }
.g-v { fill: #5fd4b8; } .g-v.v0 { fill: #3f86dc; } .g-wire { stroke: #4a5a57; stroke-width: 3; stroke-dasharray: 4 6; fill: none; } .g-pkt { fill: #5fd4b8; }
.fx-on .g-fill { animation: meter 2.4s ease-in-out infinite alternate; transform-box: fill-box; }
@keyframes meter { from { opacity: .5; } to { opacity: 1; filter: drop-shadow(0 0 6px #5fd4b8); } }
.fx-on .g-pkt { animation: pkt 2.2s linear infinite; } @keyframes pkt { from { transform: translateX(0); } to { transform: translateX(64px); } }
.fx-on .g-v.v1, .fx-on .g-v.v2, .fx-on .g-v.v3 { animation: pop 3s ease infinite; } .fx-on .g-v.v2 { animation-delay: .4s; } .fx-on .g-v.v3 { animation-delay: .8s; }
@keyframes pop { 0%, 20% { opacity: 0; } 40%, 100% { opacity: 1; } }

/* True-scale charts */
.legend { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); margin: -10px 0 14px; }
.legend .lg { width: 14px; height: 10px; border-radius: 3px; display: inline-block; } .legend .lg.after { margin-inline-start: 14px; }
.lg.before { background: var(--c-before); } .lg.after { background: var(--c-after); }
.charts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.chart { --c: var(--c-after); margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.chart.wide { margin-top: 18px; }
.chart figcaption { font-weight: 600; margin-bottom: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ratio { font-size: 12.5px; font-weight: 700; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--soft); color: var(--ink); }
.chart .row { display: grid; grid-template-columns: 170px 1fr 84px; gap: 10px; align-items: center; margin: 6px 0; }
.chart .lbl { font-size: 13px; color: var(--muted); line-height: 1.3; }
.chart .val { font-size: 13.5px; color: var(--muted); text-align: end; font-variant-numeric: tabular-nums; } .chart .val.strong { color: var(--ink); font-weight: 700; }
.bar { width: 100%; height: 22px; display: block; overflow: visible; }
.bar rect { transform-box: fill-box; transform-origin: left center; }
.bar.before rect { fill: var(--c-before); } .bar.after rect { fill: var(--c-after); }
[dir="rtl"] .bar { transform: scaleX(-1); }
.fx-on .chart:not(.in) .bar rect { transform: scaleX(0); } .fx-on .bar rect { transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.hair { font-size: 12px; color: var(--muted); margin: 6px 0 0; font-style: italic; }
.table-view { margin-top: 12px; font-size: 14px; } .table-view summary { cursor: pointer; color: var(--muted); }
.table-view table { width: 100%; border-collapse: collapse; margin-top: 8px; } .table-view th, .table-view td { text-align: start; padding: 6px 8px; border-bottom: 1px solid var(--line); }
@media (max-width: 860px) { .gadgets, .charts { grid-template-columns: 1fr; } .chart .row { grid-template-columns: 110px 1fr 70px; } }

/* P2P v5 */
#p2p .p2p-wrap { grid-template-columns: 1fr 1.05fr; align-items: start; }
.src-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.src-os { --os-belly: var(--panel); display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); text-decoration: none; font-weight: 600; font-size: 14.5px; transition: border-color .15s, transform .15s; }
.src-os:hover { border-color: var(--accent); transform: translateY(-2px); } .src-os svg { width: 18px; height: 18px; }
.os-note { font-size: 12.5px; color: var(--muted); margin: 0 0 22px; }
.p2p-art .src-box { fill: color-mix(in srgb, var(--accent) 18%, var(--panel)); stroke: var(--accent); stroke-width: 1.2; }
.p2p-art .ups path { stroke: color-mix(in srgb, var(--accent) 60%, var(--line)); stroke-width: 1.6; fill: none; stroke-dasharray: 3 5; }
.p2p-art .pk-up { fill: var(--accent); filter: drop-shadow(0 0 5px var(--accent)); }
.p2p-art .pk { fill: var(--vault); filter: drop-shadow(0 0 5px var(--vault)); }
.fx-off .p2p-art .pk-up { display: none; }
.pipeflow { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; counter-reset: s; }
.pipeflow li { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px; position: relative; }
.pipeflow li:not(:last-child)::after { content: "→"; position: absolute; inset-inline-end: -12px; top: 34px; color: var(--muted); z-index: 1; }
[dir="rtl"] .pipeflow li:not(:last-child)::after { content: "←"; }
.pipeflow h4 { margin: 12px 0 2px; font-size: 16px; } .pipeflow p { margin: 0; color: var(--muted); font-size: 13.5px; }
.blk { display: flex; gap: 0; height: 26px; align-items: center; direction: ltr; }
.blk i { display: block; height: 22px; background: var(--c-before); flex: 1; transition: all .6s; }
.st0 .blk i { margin: 0; } .st0 .blk i:first-child { border-radius: 6px 0 0 6px; } .st0 .blk i:last-child { border-radius: 0 6px 6px 0; }
.st1 .blk { width: 62%; } .st1 .blk i { background: color-mix(in srgb, var(--c-before) 60%, var(--c-after)); }
.st2 .blk, .st3 .blk, .st4 .blk { width: 62%; gap: 3px; } .st2 .blk i, .st3 .blk i, .st4 .blk i { border-radius: 4px; background: color-mix(in srgb, var(--c-before) 60%, var(--c-after)); }
.st3 .blk i { opacity: .35; } .st3 .blk i:nth-child(4) { opacity: 1; background: var(--c-after); box-shadow: 0 0 10px var(--c-after); }
.st4 .blk i { visibility: hidden; } .st4 .blk i:nth-child(4) { visibility: visible; background: var(--c-after); box-shadow: 0 0 12px var(--c-after); }
.fx-on .st4 .blk i:nth-child(4) { animation: send 1.8s ease-in-out infinite; } @keyframes send { 0% { transform: translateX(-40px); opacity: 0; } 30%, 70% { opacity: 1; } 100% { transform: translateX(60px); opacity: 0; } }
.fx-on .st1 .blk { animation: squeeze 2.6s ease-in-out infinite alternate; } @keyframes squeeze { from { width: 100%; } to { width: 62%; } }
@media (max-width: 860px) { .pipeflow { grid-template-columns: 1fr 1fr; } .pipeflow li::after { display: none; } }

/* AI fleet */
.fleet { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: center; margin-top: 30px; }
.fleet-art svg { width: 100%; } .fleet-art .orbit { fill: none; stroke: var(--line); stroke-dasharray: 2 5; }
.fleet-art .ag { fill: var(--night); } .fleet-art .ag.r1 { fill: #5fd4b8; } .fleet-art .ag.r2 { fill: #d8ee73; }
.fleet-art .core { fill: var(--night); filter: drop-shadow(0 0 12px var(--night)); } .fleet-art .core-t { fill: #fff; font-weight: 700; font-size: 15px; font-family: inherit; }
.fx-on .fleet-art .ag { animation: twinkle 3s ease-in-out infinite; } .fx-on .fleet-art .d1 { animation-delay: .4s; } .fx-on .fleet-art .d2 { animation-delay: .8s; }
.fx-on .fleet-art .d3 { animation-delay: 1.2s; } .fx-on .fleet-art .d4 { animation-delay: 1.6s; } .fx-on .fleet-art .d5 { animation-delay: 2s; } .fx-on .fleet-art .d6 { animation-delay: 2.4s; }
@keyframes twinkle { 50% { opacity: .35; } }
.night-cards.four { grid-template-columns: repeat(2, 1fr); margin: 14px 0 10px; }
@media (max-width: 860px) { .fleet { grid-template-columns: 1fr; } .fleet-art { max-width: 240px; } }

/* XiVault timeline */
.vault-sec { background: radial-gradient(70% 60% at 50% 0%, color-mix(in srgb, var(--vault) 14%, transparent), transparent 70%); }
.vault-head { display: flex; align-items: center; gap: 18px; } .vault-head img { border-radius: 18px; background: #fff; padding: 4px; }
.vtl { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; position: relative; }
.vtl::before { content: ""; position: absolute; inset-inline: 30px; top: 22px; height: 3px; background: linear-gradient(90deg, var(--vault), var(--vault) 66%, #e0622e 76%, #7fd49a); border-radius: 2px; }
[dir="rtl"] .vtl::before { background: linear-gradient(-90deg, var(--vault), var(--vault) 66%, #e0622e 76%, #7fd49a); }
.ev { position: relative; text-align: center; }
.ev .dot { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 10px; border-radius: 50%; background: var(--panel); border: 3px solid var(--vault); font-weight: 700; font-size: 14px; position: relative; z-index: 1; }
.ev.base .dot { background: var(--vault); color: #fff; } .ev.bad .dot { border-color: #e0622e; color: #e0622e; } .ev.good .dot { border-color: #7fd49a; background: #7fd49a; color: #11331d; }
.fx-on .ev.bad .dot { animation: alarm 1.4s ease-in-out infinite; } @keyframes alarm { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, #e0622e 25%, transparent); } }
.fx-on .ev.good .dot { animation: ok 2.4s ease-in-out infinite; } @keyframes ok { 50% { box-shadow: 0 0 18px #7fd49a; } }
.ev h4 { margin: 0; font-size: 15.5px; } .ev p { margin: 2px 0 6px; color: var(--muted); font-size: 13px; }
.ev .size { font-size: 13px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); }
.ev.add .size { color: var(--c-after); } .ev.bad .size { color: #e0622e; } .ev.good .size { color: #2f8a4c; }
@media (max-width: 860px) { .vtl { grid-template-columns: repeat(3, 1fr); row-gap: 22px; } .vtl::before { display: none; } }
.p2p-art .src-t { fill: var(--ink); font-size: 12.5px; font-weight: 600; font-family: inherit; }
.p2p-art svg { direction: ltr; }