/* Direct Routing — deck-specific styles */
.dr-node { width: 140px; height: 140px; border-radius: 50%; display: grid; place-items: center; text-align: center; font-size: 20px; font-weight: 700; line-height: 1.15; background: var(--panel); border: 2px solid var(--c); box-shadow: 0 16px 40px rgba(0,0,0,.35); transition: opacity .6s var(--ease), transform .8s var(--ease), filter .6s; }
.dr-node .pi { color: var(--c); margin-bottom: 4px; }
.dr-badge { position: absolute; right: -8px; top: -8px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--amber); color: #111827; box-shadow: 0 6px 16px rgba(0,0,0,.4); opacity: 0; transform: scale(.6); transition: all .5s var(--ease); }
.dr-badge .pi { color: #111827; margin: 0; }
.dr-badge.dr-on { opacity: 1; transform: none; }
.dr-dot { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); border: 2px solid var(--c); box-shadow: 0 10px 26px rgba(0,0,0,.35); }
.dr-dot .pi { color: var(--c); }
.dr-row-label { font-size: 30px; font-weight: 750; color: #fff; }
.dr-row-label small { display: block; font-size: 22px; font-weight: 500; color: var(--ink-3); margin-top: 2px; }
.dr-label { font-size: 16px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); margin-top: 4px; }
.dr-num { font-family: var(--mono); font-size: 34px; font-weight: 700; color: #fff; min-height: 42px; letter-spacing: .02em; }
.dr-center { text-align: center; }
.dr-empty td { color: var(--ink-4) !important; font-style: italic; }

/* cost bars */
.dr-bar { display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 24px; }
.dr-bar .dr-bl { font-size: 28px; font-weight: 700; color: #fff; }
.dr-bar .dr-bl small { display: block; font-size: 20px; color: var(--ink-3); font-weight: 500; }
.dr-track { height: 84px; border-radius: 16px; background: rgba(148,163,184,.08); border: 1px solid var(--line); overflow: hidden; }
.dr-fill { height: 100%; border-radius: 16px; color: #111827 !important; transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease); display: flex; align-items: center; justify-content: flex-end; padding-right: 22px; font-size: 30px; font-weight: 800; color: #fff; }
.dr-fill.dr-on { transform: scaleX(1); }

/* secure tunnel */
.dr-tunnel { border-radius: 60px; border: 3px solid var(--green); background: linear-gradient(90deg, rgba(16,185,129,.10), rgba(59,130,246,.16), rgba(16,185,129,.10)); box-shadow: 0 0 0 8px rgba(16,185,129,.08), 0 20px 50px rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; gap: 16px; font-size: 26px; font-weight: 750; color: #fff; }
.dr-tunnel .pi { color: var(--green-2); }

/* London region */
.dr-region { border-radius: 40px; border: 2px dashed rgba(148,163,184,.45); background: rgba(59,130,246,.06); }
.dr-region-t { position: absolute; left: 28px; bottom: 18px; display: flex; align-items: center; gap: 10px; font-size: 26px; font-weight: 750; color: #fff; }
.dr-region-t .pi { color: var(--red-2); }

.dr-mesh line { stroke-linecap: round; }
.dr-stat .p2-stat-value { font-size: 96px; }