* { font-family: 'Inter', sans-serif; }
.mono { font-family: 'JetBrains Mono', monospace; }
.card {
    background: white;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s;
}
.metric-card {
    background: #FFF7ED;
    border-radius: 8px;
    padding: 16px;
}
.attention-mha { background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%); }
.attention-gqa { background: linear-gradient(135deg, #dfe6e9 0%, #b2bec3 100%); }
.attention-mla { background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%); }
.layer-attention { border-left: 4px solid #F59E0B; }
.layer-mlp { border-left: 4px solid #2e7d32; }
.layer-moe { border-left: 4px solid #F97316; }
.layer-norm { border-left: 4px solid #01579b; }
.layer-embedding { border-left: 4px solid #c2185b; }
.mermaid { background: white; border-radius: 8px; padding: 16px; }
.tab-active {
    border-bottom: 3px solid #FF9D00;
    color: #FF9D00;
}
.loading-spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #FF9D00;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.fade-in {
    animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Tooltip z-index fix */
[id^="tooltip-"] {
    z-index: 99999 !important;
}
/* Ensure table cells don't create new stacking context */
td, th {
    position: static;
}
/* Ensure tooltip trigger has proper stacking */
.relative:hover [id^="tooltip-"] {
    z-index: 99999 !important;
}
/* Table container should not clip tooltips */
.overflow-x-auto {
    overflow: visible !important;
}

/* Architecture view */
.arch-card {
    background: #1a1f2e;
    border-radius: 16px;
    color: #e2e8f0;
    padding: 32px;
}
.arch-badge {
    display: inline-block;
    background: rgba(255,255,255,0.12);
    border-radius: 6px;
    padding: 2px 10px;
    font-size: 13px;
    font-weight: 500;
    margin-right: 6px;
}
.arch-layer {
    background: rgba(255,255,255,0.06);
    border: 1px dashed rgba(255,255,255,0.15);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 0 auto;
    max-width: 600px;
    position: relative;
    transition: background 0.2s, max-width 0.4s ease;
}
/* When any descendant DAG panel is open, let the layer card expand
   to fit the fully-rendered DAG. `:has()` for modern browsers,
   `.is-expanded` toggled by toggleArchPanel() as a fallback.
   Cycle containers inherit the same rule so opening an inner
   block widens the wrapper too.

   Width: `100%` — respect the parent layout's content area.
   Earlier `92vw` ignored sidebars / outer page padding and let
   the card bleed past the visible content boundary. Wide DAGs
   are handled by `.dag-svg-container { overflow-x: auto }` —
   horizontal scroll inside the card, not card overflow. */
.arch-layer:has(.arch-detail-panel.open),
.arch-layer.is-expanded,
.arch-cycle-container:has(.arch-detail-panel.open),
.arch-cycle-container.is-expanded {
    max-width: 100%;
}
.arch-cycle-container {
    /* Match the collapsed `.arch-layer` width so the wrapper sits
       at the same x-position as surrounding non-cycle layers.
       Defining this in CSS (not inline on the element) lets the
       `.is-expanded` / `:has(.open)` rule above override it when
       an inner block opens its DAG — inline styles would beat
       the stylesheet rule and the wrapper would stay at 600px. */
    max-width: 600px;
    margin: 0 auto;
    transition: max-width 0.4s ease;
}
.arch-layer:hover {
    background: rgba(255,255,255,0.09);
}
.arch-layer.type-embedding, .arch-layer.type-lm_head {
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(99, 102, 241, 0.4);
}
.arch-layer.type-norm {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
}
.arch-layer.type-dense_block, .arch-layer.type-moe_block {
    border: 1px dashed rgba(255,255,255,0.2);
}
.arch-connector {
    width: 2px;
    height: 24px;
    background: rgba(255,255,255,0.2);
    margin: 0 auto;
}
.arch-expand-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.06);
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.2s;
}
.arch-expand-btn:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
}
.arch-detail-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    margin-top: 0;
}
.arch-detail-panel.open {
    /* Generous cap — tall enough to hold any realistic expanded block
       DAG (MLA + DSA + MoE with split/merge/rope/concat + experts) so
       the panel self-adapts to content instead of clipping. */
    max-height: 20000px;
    margin-top: 12px;
}
.arch-detail-panel .mermaid-inner {
    background: #f8fafc;
    border-radius: 8px;
    padding: 16px;
    max-width: 600px;
    margin: 0 auto;
}
.arch-summary-table {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-top: 24px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    overflow: hidden;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.arch-summary-cell {
    flex: 1;
    text-align: center;
    padding: 10px 8px;
    border-right: 1px solid rgba(255,255,255,0.08);
}
.arch-summary-cell:last-child { border-right: none; }
.arch-summary-cell .label { font-size: 11px; color: #94a3b8; margin-bottom: 2px; }
.arch-summary-cell .value { font-size: 15px; font-weight: 600; }

/* Interactive DAG */
.dag-container { background: #1a1f2e; border-radius: 12px; }
.dag-node-box {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #e2e8f0;
    position: relative;
    z-index: 2;
    cursor: default;
    /* Cap node width so a long formula / op_description doesn't
       force ELK to lay out the whole DAG hundreds of pixels wider
       than necessary. `min-width` floor keeps short-name nodes
       (`input`, `add`) from collapsing into one-character-per-
       line columns. `overflow-wrap: anywhere` only breaks long
       words when they actually overflow — unlike the earlier
       `word-break: break-word` which caused short identifiers
       (`q_no_pe_slice`, `input`) to render vertically when
       sibling layout pressure narrowed the column. */
    min-width: 80px;
    max-width: 360px;
    overflow-wrap: anywhere;
}
.dag-node-box.expandable { cursor: pointer; }
.dag-node-box.expandable:hover { filter: brightness(1.2); }
.dag-node-box .expand-icon {
    position: absolute;
    right: -10px;
    top: -8px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #334155;
    border: 1px solid #475569;
    color: #94a3b8;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.dag-node-box .expand-icon:hover { background: #475569; color: #fff; }
.dag-node-box.s-io { background: rgba(255,255,255,0.04); border: 1.5px solid #475569; border-radius: 20px; color: #94a3b8; font-size: 12px; padding: 5px 16px; }
/* Cross-iteration carry pseudo-nodes (BlockGraph.carries):
   rendered at the block boundary as orange-tinted pills with a
   cyclic-arrow glyph. Inbound (`↺`) = value from previous
   iteration; outbound (`↻`) = value piped to next iteration. */
.dag-node-box.s-carry {
    background: rgba(245,158,11,0.12);
    border: 1.5px dashed rgba(245,158,11,0.5);
    border-radius: 20px;
    color: #fbbf24;
    font-size: 12px;
    padding: 5px 14px;
    font-weight: 500;
}
.dag-node-box.s-attn { background: rgba(37,99,235,0.15); border: 1px solid rgba(37,99,235,0.4); }
.dag-node-box.s-ffn { background: rgba(234,88,12,0.12); border: 1px solid rgba(234,88,12,0.35); }
.dag-node-box.s-moe { background: rgba(124,58,237,0.12); border: 1px solid rgba(124,58,237,0.35); }
.dag-node-box.s-norm { background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,255,255,0.2); }
.dag-node-box.s-res { background: transparent; border: 1.5px dashed rgba(220,38,38,0.4); border-radius: 50%; width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; color: #f87171; }
.dag-node-box.s-op { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); }
.dag-node-box.s-view {
    background: rgba(30,41,59,0.3);
    border: 1px dashed rgba(148,163,184,0.55);
    border-radius: 16px;
    padding: 3px 12px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 400;
    font-style: italic;
}
.dag-view-shape {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-style: normal;
    font-size: 10px;
    color: #64748b;
    margin-top: 2px;
    letter-spacing: -0.2px;
}
.dag-view-shape .arrow { color: #94a3b8; margin: 0 3px; }
.dag-node-detail { font-size: 11px; color: #94a3b8; margin-top: 1px; }
.dag-op-formula {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 10.5px;
    color: #a5b4fc;
    margin-top: 2px;
    letter-spacing: -0.1px;
}
.dag-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 8px; font-size: 10px; background: rgba(124,58,237,0.25); color: #c084fc; font-weight: 500; }
.dag-dtype-badge { display: inline-block; margin-left: 4px; padding: 0px 4px; border-radius: 4px; font-size: 9px; font-weight: 500; background: rgba(234,179,8,0.15); color: #ca8a04; }
.dag-dtype-line { margin-top: 4px; }
/* ELK DAG renderer */
.dag-svg-container {
    position: relative;
    max-width: 100%;       /* never exceed the parent card's content width */
    overflow-x: auto;      /* wide blocks (e.g. KDA with 9 parallel projs) scroll instead of bleeding out of the panel */
    overflow-y: visible;
}
.dag-svg-container svg.dag-edges {
    /* SVG keeps its natural width/height attribute size — without
       this the CSS `width: 100%` would compress SVG content when
       the container shrinks (max-width: 100%) under a narrow
       parent, while the absolutely-positioned node DIVs still
       sit at their full layout coords. The two would diverge.
       Letting the SVG retain W×H means edges and nodes share
       the same coordinate space and the container scrolls
       horizontally as one piece. */
    position: absolute; top: 0; left: 0;
    pointer-events: none; z-index: 0;
    overflow: visible;
}
/* `.dag-elk-nodes` lifts the absolute-positioned node boxes
   above the edge SVG so they occlude lines and receive clicks. */
.dag-svg-container .dag-elk-nodes { position: relative; z-index: 1; }
.dag-edge-label { font-size: 10px; fill: #94a3b8; pointer-events: none; }
/* Expanded compound: dashed frame + faded collapse-tab in
   top-left so the compound name stays visible without competing
   with the inner children for visual weight. */
.dag-compound-wrap.expanded {
    border: 1px dashed rgba(148, 163, 184, 0.25);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
}
.dag-compound-wrap.expanded > .dag-elk-collapse-tab {
    background: transparent !important;
    border: none !important;
    font-size: 0.8em;
    opacity: 0.7;
}