/* ===== Architecture Visualizer Styles ===== */

:root {
    --layered-color: #6366F1;
    --layered-bg: #161830;
    --layered-light: #1e2248;
    --clean-color: #8B5CF6;
    --clean-bg: #1a1630;
    --clean-light: #241e48;
    --hex-color: #3B82F6;
    --hex-bg: #0d1630;
    --hex-light: #152048;
    --ddd-color: #F59E0B;
    --ddd-bg: #1f1a0d;
    --ddd-light: #302615;
    --cqrs-color: #10B981;
    --cqrs-bg: #0d1f18;
    --cqrs-light: #153024;
    --es-color: #EC4899;
    --es-bg: #1f0d1a;
    --es-light: #301524;
    --eda-color: #F97316;
    --eda-bg: #1f150d;
    --eda-light: #302015;
    --mvc-color: #EF4444;
    --mvc-bg: #1f0d0d;
    --mvc-light: #301515;

    --archv-bg: #141922;
    --archv-card-bg: #1a2030;
    --archv-border: #2a3444;
    --archv-text: #e0e4ea;
    --archv-text-light: #8892a4;
    --archv-radius: 8px;
    --archv-shadow: 0 2px 8px rgba(0,0,0,0.3);
    --archv-accent: #6366F1;
    --archv-accent-bg: #161830;
    --archv-accent-light: #1e2248;
    --archv-transition: 0.25s ease;
}

.archv-page {
    max-width: 1200px;
    min-width: 960px;
    margin: 0 auto;
    padding: 0 10px;
    color: var(--archv-text);
}

.archv-page *,
.archv-page *::before,
.archv-page *::after {
    box-sizing: border-box;
}

.archv-page button,
.archv-page select,
.archv-page input,
.archv-page textarea {
    color: var(--archv-text);
    font-family: inherit;
}


/* ===== Architecture Navigation ===== */
.arch-nav {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    background: var(--archv-card-bg);
    border: 1px solid var(--archv-border);
    border-radius: var(--archv-radius);
    padding: 4px;
    flex-wrap: wrap;
}

.arch-tab {
    flex: 1;
    padding: 10px 12px;
    border: 2px solid transparent;
    border-radius: 6px;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--archv-transition);
    color: var(--archv-text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    min-width: 0;
}

.arch-tab:hover {
    background: var(--archv-bg);
    color: var(--archv-text);
}

.arch-tab.active[data-arch="layered"] {
    background: var(--layered-bg);
    border-color: var(--layered-color);
    color: var(--layered-color);
}

.arch-tab.active[data-arch="clean"] {
    background: var(--clean-bg);
    border-color: var(--clean-color);
    color: var(--clean-color);
}

.arch-tab.active[data-arch="hexagonal"] {
    background: var(--hex-bg);
    border-color: var(--hex-color);
    color: var(--hex-color);
}

.arch-tab.active[data-arch="ddd"] {
    background: var(--ddd-bg);
    border-color: var(--ddd-color);
    color: var(--ddd-color);
}

.arch-tab.active[data-arch="cqrs"] {
    background: var(--cqrs-bg);
    border-color: var(--cqrs-color);
    color: var(--cqrs-color);
}

.arch-tab.active[data-arch="eventsourcing"] {
    background: var(--es-bg);
    border-color: var(--es-color);
    color: var(--es-color);
}

.arch-tab.active[data-arch="eda"] {
    background: var(--eda-bg);
    border-color: var(--eda-color);
    color: var(--eda-color);
}

.arch-tab.active[data-arch="microservices"] {
    background: #1a1f0d;
    border-color: #84CC16;
    color: #84CC16;
}

.arch-tab.active[data-arch="mvc"] {
    background: var(--mvc-bg);
    border-color: var(--mvc-color);
    color: var(--mvc-color);
}

/* ===== Global Controls ===== */
.global-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 8px;
    background: var(--archv-card-bg);
    border: 1px solid var(--archv-border);
    border-radius: var(--archv-radius);
    padding: 8px 12px;
    transition: none;
}

.global-controls.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 0 0 var(--archv-radius) var(--archv-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.global-controls-placeholder {
    display: none;
}

.global-controls-placeholder.is-active {
    display: block;
}

.controls-left {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.controls-right {
    display: flex;
    gap: 6px;
    align-items: center;
}

.ctrl-btn {
    padding: 7px 16px;
    border: 1px solid var(--archv-border);
    border-radius: 6px;
    background: var(--archv-card-bg);
    color: var(--archv-text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--archv-transition);
}

.ctrl-btn:hover {
    background: var(--archv-border);
}

.run-btn { color: var(--archv-accent); border-color: var(--archv-accent); }
.run-btn:hover { background: var(--archv-accent); color: #fff; }
.pause-btn { color: #F59E0B; border-color: #F59E0B; }
.pause-btn:hover:not(:disabled) { background: #F59E0B; color: var(--archv-bg); }
.pause-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.reset-btn { color: var(--archv-text-light); border-color: var(--archv-border); }
.reset-btn:hover { border-color: var(--archv-text-light); background: var(--archv-text-light); color: var(--archv-bg); }

.speed-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--archv-text-light);
    margin-left: 8px;
}

.speed-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100px;
    height: 6px;
    background: var(--archv-border);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.speed-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--archv-accent);
    border-radius: 50%;
    cursor: pointer;
    transition: box-shadow var(--archv-transition);
}

.speed-range::-webkit-slider-thumb:hover {
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.5);
}

.speed-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--archv-accent);
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.speed-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--archv-text);
    min-width: 45px;
}

.compare-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--archv-text);
    cursor: pointer;
}

.compare-toggle input { display: none; }

.toggle-slider {
    width: 36px;
    height: 20px;
    background: #3a4455;
    border-radius: 10px;
    position: relative;
    transition: background var(--archv-transition);
}

.toggle-slider::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: #e0e4ea;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform var(--archv-transition);
}

.compare-toggle input:checked + .toggle-slider {
    background: var(--archv-accent);
}

.compare-toggle input:checked + .toggle-slider::after {
    transform: translateX(16px);
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 8px;
    background: var(--archv-card-bg);
    border: 1px solid var(--archv-border);
    border-radius: 6px;
}

.stat-label {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--archv-text-light);
    letter-spacing: 0.5px;
}

.stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--archv-text);
    line-height: 1.2;
}

/* ===== Mode Tabs ===== */
.mode-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    background: var(--archv-card-bg);
    border-radius: var(--archv-radius);
    padding: 4px 4px 0;
    border: 1px solid var(--archv-border);
    border-bottom: none;
}

.mode-tab {
    padding: 6px 12px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    color: var(--archv-text-light);
    transition: all var(--archv-transition);
}

.mode-tab:hover {
    color: var(--archv-text);
    border-bottom-color: var(--archv-text-light);
}

.mode-tab.active {
    color: var(--archv-accent);
    border-bottom-color: var(--archv-accent);
    font-weight: 700;
}

/* ===== Pattern Description ===== */
.pattern-desc {
    font-size: 13px;
    color: var(--archv-text-light);
    padding: 8px 12px;
    background: var(--archv-accent-bg);
    border-left: 3px solid var(--archv-accent);
    border-radius: 0 6px 6px 0;
    margin-bottom: 12px;
    line-height: 1.5;
}

/* ===== Pattern Details (Collapsible) ===== */
.pattern-details {
    margin-bottom: 12px;
    background: var(--archv-card-bg);
    border: 1px solid var(--archv-border);
    border-radius: var(--archv-radius);
    overflow: hidden;
}

.pattern-details-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--archv-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--archv-transition);
}

.pattern-details-toggle:hover {
    background: var(--archv-bg);
}

.pattern-details-toggle-icon {
    font-size: 10px;
    transition: transform var(--archv-transition);
    color: var(--archv-accent);
}

.pattern-details-toggle[aria-expanded="true"] .pattern-details-toggle-icon {
    transform: rotate(90deg);
}

.pattern-details-body {
    display: none;
    padding: 0 14px 14px;
}

.pattern-details-body.expanded {
    display: block;
}

.pattern-details-section {
    margin-bottom: 12px;
}

.pattern-details-section:last-child {
    margin-bottom: 0;
}

.pattern-details-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--archv-accent);
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--archv-border);
}

.pattern-details-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pattern-details-list li {
    font-size: 12px;
    color: var(--archv-text-light);
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--archv-bg);
    line-height: 1.4;
}

.pattern-details-list li::before {
    content: '\2022';
    color: var(--archv-accent);
    margin-right: 6px;
    font-weight: 700;
}

.pattern-concepts-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pattern-concept {
    display: flex;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 4px;
    background: var(--archv-bg);
    font-size: 12px;
    line-height: 1.4;
}

.pattern-concept-term {
    font-weight: 700;
    color: var(--archv-accent);
    white-space: nowrap;
    min-width: 80px;
    flex-shrink: 0;
}

.pattern-concept-def {
    color: var(--archv-text-light);
}

/* ===== Visualization Area ===== */
.viz-area {
    position: relative;
    min-height: 560px;
    margin-bottom: 12px;
    padding: 24px;
    background: var(--archv-bg);
    border-radius: var(--archv-radius);
    border: 1px solid var(--archv-border);
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
}

#archv-canvas {
    position: relative;
    width: 100%;
    min-height: 540px;
    flex: 1;
    z-index: 1;
}

.archv-svg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 2;
}

/* ===== Layout: Vertical (Layered, DDD) ===== */
.layout-vertical {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.archv-layer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 20px;
    border: 2px solid var(--archv-border);
    border-radius: var(--archv-radius);
    position: relative;
    transition: border-color var(--archv-transition), background var(--archv-transition);
    margin-bottom: -1px;
}

.archv-layer-name {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--archv-text-light);
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
}

.archv-components {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    justify-content: center;
}

.archv-components-col {
    flex-direction: column;
    align-items: center;
    gap: 70px;
}

.archv-component {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: 1px solid var(--archv-border);
    border-radius: 5px;
    background: var(--archv-card-bg);
    font-size: 12px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    color: var(--archv-text);
    transition: all 0.3s ease;
    cursor: default;
    position: relative;
}

.archv-component .comp-icon {
    font-size: 14px;
}

/* ===== Component States ===== */
.archv-component.archv-active {
    border-color: var(--archv-accent);
    background: var(--archv-accent-bg);
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.4), 0 0 24px rgba(99, 102, 241, 0.15);
    transform: scale(1.08);
    z-index: 10;
    color: var(--archv-accent);
}

.archv-component.archv-visited {
    border-color: var(--archv-accent);
    background: var(--archv-accent-bg);
    opacity: 0.7;
}

.archv-layer.archv-layer-active {
    border-color: var(--archv-accent);
    background: var(--archv-accent-bg);
}

/* ===== Arrow Connectors Between Layers ===== */
.archv-arrow-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    color: var(--archv-text-light);
    font-size: 18px;
    position: relative;
}

.archv-arrow-label {
    position: absolute;
    font-size: 10px;
    color: var(--archv-text-light);
    background: var(--archv-bg);
    padding: 0 6px;
    white-space: nowrap;
}

/* ===== Step Indicator / Tooltip ===== */
.archv-step-indicator {
    position: absolute;
    top: -38px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--archv-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 20;
    pointer-events: none;
    animation: archvFadeIn 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.archv-step-indicator::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--archv-accent);
}

@keyframes archvFadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-5px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ===== Layout: Concentric (Clean Architecture) ===== */
.layout-concentric {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 540px;
    position: relative;
}

.archv-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid var(--archv-border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--archv-transition), background var(--archv-transition);
}

.archv-ring-label {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--archv-text-light);
    white-space: nowrap;
}

.archv-ring .archv-components {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
}

.archv-ring-component {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 5;
    white-space: nowrap;
}

.archv-ring-component.archv-active {
    transform: translate(-50%, -50%) scale(1.08);
}

.archv-ring-component.archv-visited {
    transform: translate(-50%, -50%);
}

.archv-ring.archv-ring-active {
    border-color: var(--archv-accent);
    background: rgba(99, 102, 241, 0.05);
}

/* Ring sizes */
.ring-0 { width: 140px; height: 140px; z-index: 4; }
.ring-1 { width: 290px; height: 290px; z-index: 3; }
.ring-2 { width: 410px; height: 410px; z-index: 2; }
.ring-3 { width: 520px; height: 520px; z-index: 1; }

/* Smaller components inside rings */
.archv-ring-component {
    padding: 4px 8px;
    font-size: 11px;
}

.ring-0 .archv-ring-component,
.ring-1 .archv-ring-component {
    padding: 3px 7px;
    font-size: 10px;
}

/* ===== Layout: Hexagonal ===== */
.layout-hexagonal {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 520px;
    position: relative;
    gap: 80px;
}

.archv-hex-side {
    display: flex;
    flex-direction: column;
    gap: 32px;
    z-index: 2;
}

.archv-hex-side-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--archv-text-light);
    text-align: center;
    margin-bottom: 4px;
}

.archv-hex-core {
    width: 400px;
    height: 500px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    border: none;
    transition: all var(--archv-transition);
}

.archv-hex-core::before {
    content: '';
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: var(--archv-accent-bg);
    filter: drop-shadow(0 0 1px var(--archv-accent)) drop-shadow(0 0 1px var(--archv-accent));
    z-index: -1;
}

.archv-hex-core-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 20px 24px;
    height: 100%;
    justify-content: center;
}

.archv-hex-core-inner .archv-hex-core-label {
    margin-bottom: 10px;
}

.archv-hex-core-inner > #comp-hex-usecase {
    margin-bottom: 100px;
}

.archv-hex-core-inner .archv-hex-ports-row {
    margin: 0;
}

.archv-hex-core-inner > #comp-hex-entity {
    margin-top: 80px;
}

.archv-hex-core-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--archv-text-light);
}

.archv-hex-ports-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 120%;
}

.archv-port {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px dashed var(--archv-accent);
    border-radius: 4px;
    font-size: 11px;
    color: var(--archv-accent);
    background: var(--archv-bg);
    transition: all var(--archv-transition);
}

.archv-port.archv-active {
    border-style: solid;
    background: var(--archv-accent-bg);
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.3);
}

.archv-adapter {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: 1px solid var(--archv-border);
    border-radius: 5px;
    background: var(--archv-card-bg);
    font-size: 12px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    color: var(--archv-text);
    transition: all 0.3s ease;
    cursor: default;
}

.archv-adapter.archv-active {
    border-color: var(--archv-accent);
    background: var(--archv-accent-bg);
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.4);
    transform: scale(1.05);
    color: var(--archv-accent);
}

.archv-adapter.archv-visited {
    border-color: var(--archv-accent);
    background: var(--archv-accent-bg);
    opacity: 0.7;
}

/* Hex side layer highlighting */
.archv-hex-side.archv-layer-active {
    background: var(--archv-accent-bg);
    border-radius: var(--archv-radius);
    padding: 10px;
}

/* ===== Tooltip z-index fix: raise parent above SVG layer on hover ===== */
.archv-hex-core:has(.archv-tooltip) {
    z-index: 10;
}

.archv-component:has(.archv-tooltip),
.archv-port:has(.archv-tooltip) {
    z-index: 50;
}

/* ===== Component Tooltips ===== */
.archv-component[data-tooltip],
.archv-port[data-tooltip],
.archv-event-card[data-tooltip],
.archv-projection[data-tooltip],
.archv-producer[data-tooltip],
.archv-consumer[data-tooltip],
.archv-event-bus[data-tooltip],
.archv-saga-box[data-tooltip],
.archv-acl[data-tooltip],
.archv-translator[data-tooltip] {
    cursor: help;
}

.archv-port[data-tooltip],
.archv-event-card[data-tooltip],
.archv-projection[data-tooltip],
.archv-producer[data-tooltip],
.archv-consumer[data-tooltip],
.archv-event-bus[data-tooltip],
.archv-saga-box[data-tooltip],
.archv-acl[data-tooltip],
.archv-translator[data-tooltip] {
    position: relative;
}

.archv-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--archv-card-bg);
    border: 1px solid var(--archv-accent);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 11px;
    color: var(--archv-text);
    white-space: normal;
    width: max-content;
    max-width: 220px;
    z-index: 30;
    pointer-events: none;
    animation: archvFadeIn 0.15s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    line-height: 1.4;
}

#comp-hex-input-port .archv-tooltip {
    left: 0;
    transform: none;
}

#comp-hex-input-port .archv-tooltip::after {
    left: 15px;
    transform: none;
}

#comp-hex-output-port .archv-tooltip {
    left: auto;
    right: 0;
    transform: none;
}

#comp-hex-output-port .archv-tooltip::after {
    left: auto;
    right: 15px;
    transform: none;
}

.archv-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--archv-accent);
}

/* Event card tooltips: show below to avoid clipping by timeline container */
.archv-event-card .archv-tooltip {
    bottom: auto;
    top: calc(100% + 8px);
}

.archv-event-card .archv-tooltip::after {
    top: auto;
    bottom: 100%;
    border-top: none;
    border-bottom: 5px solid var(--archv-accent);
}

/* ===== Layout: Split (CQRS) ===== */
.layout-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    min-height: 420px;
}

.archv-split-side {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 2px solid var(--archv-border);
    border-radius: var(--archv-radius);
    padding: 12px;
}

.archv-split-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--archv-text-light);
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--archv-border);
    margin-bottom: 8px;
}

.archv-split-side .archv-layer {
    border: 1px solid var(--archv-border);
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 4px;
}

.archv-event-bus {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border: 2px dashed var(--archv-accent);
    border-radius: var(--archv-radius);
    background: var(--archv-accent-bg);
    font-size: 12px;
    font-weight: 700;
    color: var(--archv-accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all var(--archv-transition);
}

.archv-event-bus.archv-active {
    background: var(--archv-accent);
    color: #fff;
    box-shadow: 0 0 16px rgba(99, 102, 241, 0.4);
}

/* ===== Bridge Arrows (async connectors) ===== */
.archv-bridge-arrows {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 2px 0;
    font-size: 11px;
    color: var(--archv-text-light);
}

.archv-bridge-arrow {
    display: flex;
    align-items: center;
    gap: 6px;
}

.archv-bridge-arrow .bridge-line {
    width: 40px;
    border-top: 2px dashed var(--archv-accent);
    opacity: 0.5;
}

.archv-bridge-arrow .bridge-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.7;
}

/* ===== Async Badge ===== */
.archv-async-badge {
    display: inline-block;
    font-size: 9px;
    padding: 1px 6px;
    margin-left: 6px;
    border: 1px solid var(--archv-accent);
    border-radius: 3px;
    color: var(--archv-accent);
    opacity: 0.8;
    vertical-align: middle;
    letter-spacing: 0.5px;
}

/* ===== Flow Legend ===== */
.archv-flow-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    width: 100%;
    padding: 6px 0 0;
    font-size: 10px;
    color: var(--archv-text-light);
    opacity: 0.7;
}

.archv-flow-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.archv-flow-legend .legend-line-sync {
    width: 24px;
    border-top: 2px dashed var(--archv-accent);
}

.archv-flow-legend .legend-line-async {
    width: 24px;
    border-top: 2px dashed #cba6f7;
}

.archv-flow-legend .legend-line-replay {
    width: 24px;
    border-top: 2px dashed #94e2d5;
}

.archv-flow-legend .legend-line-write {
    width: 24px;
    border-top: 2.5px dashed #f9e2af;
}

.archv-flow-legend .legend-line-response {
    width: 24px;
    border-top: 2px dashed #94e2d5;
}

.archv-flow-legend .legend-line-compensate {
    width: 24px;
    border-top: 2.5px dashed #f38ba8;
}

/* ===== Phase Labels (Event Sourcing) ===== */
.archv-phase-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--archv-accent);
    opacity: 0.7;
    padding: 2px 0;
    border-left: 3px solid var(--archv-accent);
    padding-left: 8px;
    margin: 2px 0 -6px;
}

/* ===== Layout: Timeline (Event Sourcing) ===== */
.layout-timeline {
    display: flex;
    flex-direction: column;
    gap: 30px;
    min-height: 420px;
}

.layout-timeline .archv-event-bus {
    grid-column: unset;
    grid-row: unset;
}

.archv-timeline-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.archv-timeline-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--archv-text-light);
    padding: 4px;
    min-width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.archv-timeline-events {
    display: flex;
    gap: 6px;
    flex: 1;
    overflow: visible;
    padding: 8px;
    background: var(--archv-card-bg);
    border: 1px solid var(--archv-border);
    border-radius: 6px;
    align-items: center;
}

.archv-event-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 12px;
    border: 1px solid var(--archv-border);
    border-radius: 5px;
    background: var(--archv-bg);
    font-size: 11px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    color: var(--archv-text);
    min-width: 100px;
    text-align: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.archv-event-card.archv-active {
    border-color: var(--archv-accent);
    background: var(--archv-accent-bg);
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.4);
    transform: scale(1.05);
    color: var(--archv-accent);
}

.archv-event-card.archv-visited {
    border-color: var(--archv-accent);
    opacity: 0.7;
}

.archv-event-seq {
    font-size: 9px;
    color: var(--archv-text-light);
}

.archv-event-name {
    font-weight: 600;
}

.archv-timeline-arrow {
    display: flex;
    align-items: center;
    color: var(--archv-text-light);
    font-size: 14px;
    flex-shrink: 0;
}

.archv-projections {
    display: flex;
    gap: 60px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px 40px;
    border: 1px solid var(--archv-border);
    border-radius: 6px;
    background: var(--archv-card-bg);
}

.archv-projection {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 28px;
    border: 1px solid var(--archv-border);
    border-radius: 5px;
    background: var(--archv-bg);
    font-size: 12px;
    transition: all 0.3s ease;
}

.archv-projection.archv-active {
    border-color: var(--archv-accent);
    background: var(--archv-accent-bg);
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.3);
    color: var(--archv-accent);
}

/* ===== Layout: Event Mesh (EDA) ===== */
.layout-event-mesh {
    display: flex;
    flex-direction: column;
    gap: 36px;
    min-height: 420px;
    align-items: stretch;
    justify-content: center;
    padding: 10px 0;
    height: 100%;
}

.archv-producers, .archv-consumers {
    display: flex;
    gap: 48px;
    flex-wrap: wrap;
    justify-content: center;
}

.archv-producer, .archv-consumer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 16px;
    border: 1px solid var(--archv-border);
    border-radius: 6px;
    background: var(--archv-card-bg);
    font-size: 12px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    transition: all 0.3s ease;
}

.archv-producer.archv-active, .archv-consumer.archv-active {
    border-color: var(--archv-accent);
    background: var(--archv-accent-bg);
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.4);
    transform: scale(1.05);
    color: var(--archv-accent);
}

.archv-producer.archv-visited, .archv-consumer.archv-visited {
    border-color: var(--archv-accent);
    opacity: 0.7;
}

.archv-mesh-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--archv-text-light);
    letter-spacing: 0.5px;
    text-align: center;
}

.archv-saga-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 16px;
    border: 2px dashed var(--archv-accent);
    border-radius: 6px;
    background: var(--archv-accent-bg);
    font-size: 12px;
    font-weight: 600;
    color: var(--archv-accent);
    transition: all var(--archv-transition);
}

.archv-saga-box.archv-active {
    border-style: solid;
    background: var(--archv-accent);
    color: #fff;
}

/* ===== Layout: Microservices ===== */
.layout-microservices {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 820px;
    height: 100%;
    align-items: center;
    justify-content: flex-start;
    padding: 30px 0;
    position: relative;
}

.archv-ms-client {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-bottom: 36px;
}

.archv-ms-gateway {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-bottom: 36px;
}

.archv-ms-mesh-layer {
    position: relative;
    width: 100%;
    padding: 28px 20px;
    margin-bottom: 36px;
    border: 1px dashed rgba(132, 204, 22, 0.25);
    border-radius: 12px;
    background: rgba(132, 204, 22, 0.04);
}

.archv-ms-mesh-label {
    position: absolute;
    top: -10px;
    left: 20px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(132, 204, 22, 0.6);
    background: var(--archv-bg);
    padding: 0 8px;
}

.archv-ms-orchestrator {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 16px 0 24px;
}

.archv-ms-services {
    display: flex;
    gap: 36px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    padding: 0 20px;
}

.archv-ms-service-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 14px 10px;
    border: 1px solid var(--archv-border);
    border-radius: 8px;
    background: var(--archv-card-bg);
    min-width: 130px;
    transition: all var(--archv-transition);
}

.archv-ms-service-box.archv-layer-active {
    border-color: var(--archv-accent);
    background: var(--archv-accent-bg);
    box-shadow: 0 0 12px rgba(20, 184, 166, 0.3);
}

.archv-ms-service-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--archv-text-light);
    letter-spacing: 0.5px;
}

.archv-ms-service-components {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.archv-ms-db {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--archv-text-light);
    padding: 3px 8px;
    border: 1px dashed var(--archv-border);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.15);
    margin-top: 4px;
    transition: all var(--archv-transition);
}

.archv-ms-db-icon {
    font-size: 12px;
}

.archv-ms-service-box.archv-layer-active .archv-ms-db {
    border-color: var(--archv-accent);
    color: var(--archv-text);
}

.archv-ms-queue-area {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-top: 36px;
}

.archv-ms-queue-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 18px;
    border: 1px dashed rgba(249, 115, 22, 0.4);
    border-radius: 8px;
    background: rgba(249, 115, 22, 0.05);
    transition: all var(--archv-transition);
}

.archv-ms-queue-box.archv-layer-active {
    border-color: rgba(249, 115, 22, 0.7);
    background: rgba(249, 115, 22, 0.1);
    box-shadow: 0 0 12px rgba(249, 115, 22, 0.2);
}

/* ===== Layout: Microservices Async (hub-and-spoke) ===== */

.layout-microservices-async {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 600px;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
    position: relative;
}

.archv-ms-async-top,
.archv-ms-async-bottom {
    display: flex;
    gap: 60px;
    justify-content: center;
    width: 100%;
    padding: 0 20px;
}

.layout-microservices-async .archv-ms-queue-area {
    padding: 40px 0;
}

.layout-microservices-async .archv-ms-queue-box {
    padding: 16px 32px;
    border-width: 2px;
}

/* ===== Layout: Triad (MVC/MVP/MVVM) ===== */
.layout-triad {
    display: flex;
    gap: 20px;
    min-height: 420px;
    align-items: stretch;
    justify-content: center;
}

.archv-triad-box {
    flex: 1;
    max-width: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 16px;
    border: 2px solid var(--archv-border);
    border-radius: var(--archv-radius);
    background: var(--archv-card-bg);
    transition: all var(--archv-transition);
    position: relative;
}

.archv-triad-box.archv-active {
    border-color: var(--archv-accent);
    background: var(--archv-accent-bg);
}

.archv-triad-label {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--archv-text);
}

.archv-triad-desc {
    font-size: 11px;
    color: var(--archv-text-light);
    text-align: center;
    line-height: 1.4;
}

.archv-triad-arrow {
    position: absolute;
    font-size: 10px;
    color: var(--archv-accent);
    font-weight: 600;
    white-space: nowrap;
}

/* ===== Bounded Context (DDD) ===== */
.archv-bounded-context {
    border: 2px dashed var(--archv-accent);
    border-radius: var(--archv-radius);
    padding: 12px;
    margin-bottom: 12px;
    position: relative;
}

.archv-context-label {
    position: absolute;
    top: -10px;
    left: 12px;
    background: var(--archv-bg);
    padding: 0 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--archv-accent);
}

.archv-acl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    border: 2px dashed #f38ba8;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #f38ba8;
    margin: 8px 0;
    transition: all var(--archv-transition);
}

.archv-acl.archv-active {
    border-style: solid;
    background: rgba(243, 139, 168, 0.1);
    box-shadow: 0 0 8px rgba(243, 139, 168, 0.3);
}

.archv-acl.archv-visited {
    border-color: #f38ba8;
    opacity: 0.7;
}

/* ===== Layout: Context Map (DDD Strategic) ===== */
.context-map-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.layout-context-map {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 80px 40px;
    min-height: 320px;
    padding: 20px 10px;
    align-items: start;
    justify-items: center;
}

.layout-context-map .archv-bounded-context {
    width: 100%;
    max-width: 180px;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 10px 12px;
    text-align: center;
}

.layout-context-map .ctx-core {
    grid-column: 2;
    grid-row: 1;
    border-width: 3px;
}

.layout-context-map .ctx-right {
    grid-column: 3;
    grid-row: 1;
}

.layout-context-map .ctx-left {
    grid-column: 1;
    grid-row: 1;
}

.layout-context-map .ctx-bottom-left {
    grid-column: 1;
    grid-row: 2;
}

.layout-context-map .ctx-bottom-right {
    grid-column: 3;
    grid-row: 2;
}

.context-map-wrapper > .archv-ctx-relationships {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    width: 100%;
    padding: 0 10px;
}

.archv-ctx-relationship {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    transition: all var(--archv-transition);
}

.archv-ctx-relationship.rel-acl {
    border: 1px solid #f38ba8;
    color: #f38ba8;
    background: rgba(243, 139, 168, 0.06);
}

.archv-ctx-relationship.rel-shared-kernel {
    border: 1px solid #89b4fa;
    color: #89b4fa;
    background: rgba(137, 180, 250, 0.06);
}

.archv-ctx-relationship.rel-customer-supplier {
    border: 1px solid #a6e3a1;
    color: #a6e3a1;
    background: rgba(166, 227, 161, 0.06);
}

.archv-ctx-relationship.rel-conformist {
    border: 1px solid #fab387;
    color: #fab387;
    background: rgba(250, 179, 135, 0.06);
}

.archv-ctx-relationship.rel-ohs {
    border: 1px solid #cba6f7;
    color: #cba6f7;
    background: rgba(203, 166, 247, 0.06);
}

.archv-ctx-relationship.archv-active {
    transform: scale(1.08);
    box-shadow: 0 0 10px currentColor;
}

.archv-ctx-relationship.archv-visited {
    opacity: 0.7;
}

/* ===== Layout: Open Host Service (DDD Strategic) ===== */
.layout-ddd-ohs {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 420px;
    align-items: stretch;
    padding: 10px 0;
}

.archv-ohs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: 2px solid #cba6f7;
    border-radius: var(--archv-radius);
    background: rgba(203, 166, 247, 0.06);
    font-size: 12px;
    font-weight: 700;
    color: #cba6f7;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 20px 0 12px;
    transition: all var(--archv-transition);
}

.archv-ohs.archv-active {
    background: rgba(203, 166, 247, 0.15);
    box-shadow: 0 0 12px rgba(203, 166, 247, 0.4);
    transform: scale(1.03);
}

.archv-ohs.archv-visited {
    opacity: 0.7;
}

.layout-ddd-ohs .archv-consumers {
    gap: 64px;
    margin-top: 32px;
}

/* ===== Layout: DDD Saga ===== */
.layout-ddd-saga {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 480px;
    align-items: stretch;
    padding: 10px 0;
}

.layout-ddd-saga .archv-saga-box {
    align-self: center;
    min-width: 200px;
    margin-bottom: 12px;
}

.layout-ddd-saga .archv-saga-contexts {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 12px 0;
}

.layout-ddd-saga .archv-bounded-context {
    flex: 1;
    max-width: 250px;
    min-width: 180px;
    margin-bottom: 0;
}

.layout-ddd-saga .archv-event-bus {
    margin-top: 12px;
}

/* ===== Layout: Domain Events Propagation ===== */
.layout-ddd-events {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 480px;
    align-items: stretch;
    padding: 10px 0;
}

.layout-ddd-events .archv-bounded-context {
    margin-bottom: 16px;
}

.layout-ddd-events .archv-event-bus {
    margin: 24px 0;
}

.layout-ddd-events .archv-consumers {
    gap: 40px;
    margin-top: 24px;
}

.layout-ddd-events .archv-consumer {
    min-width: 150px;
}

.archv-translator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px dashed #f38ba8;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 600;
    color: #f38ba8;
    margin-top: 4px;
    transition: all var(--archv-transition);
}

.archv-translator.archv-active {
    border-style: solid;
    background: rgba(243, 139, 168, 0.1);
    box-shadow: 0 0 6px rgba(243, 139, 168, 0.3);
}

.archv-translator.archv-visited {
    opacity: 0.7;
}

.archv-consumer .archv-translator {
    width: 100%;
}

.archv-local-event {
    font-size: 10px;
    color: var(--archv-text-light);
    font-style: italic;
    margin-top: 2px;
}

/* ===== Dependency Rules Panel ===== */
.dep-rules-panel {
    margin-bottom: 12px;
    background: var(--archv-card-bg);
    border: 1px solid var(--archv-border);
    border-radius: var(--archv-radius);
    overflow: hidden;
}

.dep-rules-header {
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--archv-text);
    border-bottom: 1px solid var(--archv-border);
    background: var(--archv-bg);
}

.dep-rules-body {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dep-rule {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
}

.dep-rule.allowed {
    color: #a6e3a1;
    background: rgba(166, 227, 161, 0.05);
}

.dep-rule.forbidden {
    color: #f38ba8;
    background: rgba(243, 139, 168, 0.05);
}

.dep-rule-icon {
    font-size: 14px;
    flex-shrink: 0;
}

/* ===== Event Log ===== */
.event-log-container {
    background: var(--archv-card-bg);
    border: 1px solid var(--archv-border);
    border-radius: var(--archv-radius);
    overflow: hidden;
    margin-bottom: 20px;
}

.event-log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--archv-bg);
    border-bottom: 1px solid var(--archv-border);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--archv-text);
}

.log-clear-btn {
    padding: 3px 10px;
    border: 1px solid var(--archv-border);
    border-radius: 4px;
    background: transparent;
    color: var(--archv-text-light);
    font-size: 11px;
    cursor: pointer;
    transition: all var(--archv-transition);
}

.event-log-header > div { display: flex; gap: 6px; }

.log-clear-btn:hover {
    background: var(--archv-border);
    color: var(--archv-text);
}

.event-log {
    max-height: 200px;
    overflow-y: auto;
    padding: 8px 12px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 11px;
    line-height: 1.6;
}

.log-entry {
    display: flex;
    gap: 8px;
    padding: 2px 0;
}

.log-time {
    color: var(--archv-text-light);
    flex-shrink: 0;
}

.log-type {
    font-weight: 700;
    min-width: 70px;
    flex-shrink: 0;
}

.log-type.REQUEST { color: #89b4fa; }
.log-type.LAYER { color: #a6e3a1; }
.log-type.FLOW { color: #cba6f7; }
.log-type.RULE { color: #f9e2af; }
.log-type.RESPONSE { color: #94e2d5; }
.log-type.ERROR { color: #f38ba8; }
.log-type.EVENT { color: #fab387; }
.log-type.REPLAY { color: #94e2d5; background: rgba(148, 226, 213, 0.1); }
.log-type.WRITE_EVENT { color: #f9e2af; background: rgba(249, 226, 175, 0.1); }
.log-type.ASYNC { color: #cba6f7; background: rgba(203, 166, 247, 0.1); }
.log-type.COMMAND { color: #74c7ec; }
.log-type.QUERY { color: #b4befe; }
.log-type.LOAD { color: #a6e3a1; background: rgba(166, 227, 161, 0.1); }
.log-type.COMPENSATE { color: #f38ba8; background: rgba(243, 139, 168, 0.15); }

.log-text {
    color: var(--archv-text);
}

/* ===== Trade-offs Section ===== */
.pattern-tradeoffs {
    margin-bottom: 12px;
    background: var(--archv-card-bg);
    border: 1px solid var(--archv-border);
    border-radius: var(--archv-radius);
    overflow: hidden;
}

.pattern-tradeoffs-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--archv-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--archv-transition);
}

.pattern-tradeoffs-toggle:hover {
    background: var(--archv-bg);
}

.pattern-tradeoffs-toggle-icon {
    font-size: 10px;
    transition: transform var(--archv-transition);
    color: var(--archv-accent);
}

.pattern-tradeoffs-toggle[aria-expanded="true"] .pattern-tradeoffs-toggle-icon {
    transform: rotate(90deg);
}

.pattern-tradeoffs-body {
    display: none;
    padding: 0 14px 14px;
}

.pattern-tradeoffs-body.expanded {
    display: block;
}

.tradeoffs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.tradeoffs-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tradeoffs-col-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--archv-border);
}

.tradeoffs-col-title.pros { color: #a6e3a1; }
.tradeoffs-col-title.cons { color: #f38ba8; }

.tradeoffs-item {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--archv-bg);
    line-height: 1.4;
}

.tradeoffs-item.pro {
    color: #a6e3a1;
    border-left: 2px solid #a6e3a1;
}

.tradeoffs-item.con {
    color: #f38ba8;
    border-left: 2px solid #f38ba8;
}

.tradeoffs-when {
    font-size: 12px;
    color: var(--archv-text-light);
    padding: 8px 10px;
    border-radius: 4px;
    background: var(--archv-bg);
    border-left: 3px solid var(--archv-accent);
    line-height: 1.5;
}

.tradeoffs-when-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--archv-accent);
    margin-bottom: 4px;
}

/* ===== Step Controls ===== */
.step-btn {
    padding: 7px 12px;
    border: 1px solid var(--archv-border);
    border-radius: 6px;
    background: var(--archv-card-bg);
    color: var(--archv-text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--archv-transition);
}

.step-btn:hover:not(:disabled) {
    background: var(--archv-border);
}

.step-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.step-btn.active {
    color: #89b4fa;
    border-color: #89b4fa;
}

.step-btn.active:hover {
    background: #89b4fa;
    color: var(--archv-bg);
}

/* ===== SVG Arrows ===== */
.archv-svg-layer .flow-arrow {
    fill: none;
    stroke: var(--archv-accent);
    stroke-width: 2;
    stroke-dasharray: 6 3;
    animation: archvDash 0.6s linear infinite;
    opacity: 0.8;
}

.archv-svg-layer .flow-arrow.flow-arrow-response {
    stroke: #94e2d5;
    stroke-width: 2;
    opacity: 0.9;
}

/* Replay arrow (read from Event Store) — dashed, teal color */
.archv-svg-layer .flow-arrow.flow-arrow-replay {
    stroke: #94e2d5;
    stroke-width: 2;
    stroke-dasharray: 4 4;
    opacity: 0.7;
}

/* Write arrow (store new event) — solid, bright accent */
.archv-svg-layer .flow-arrow.flow-arrow-write {
    stroke: #f9e2af;
    stroke-width: 2.5;
    stroke-dasharray: none;
    opacity: 0.9;
    animation: none;
}

.archv-svg-layer .flow-arrow-head {
    fill: var(--archv-accent);
}

.archv-svg-layer .flow-arrow-head-response {
    fill: #94e2d5;
}

.archv-svg-layer .flow-arrow-head-replay {
    fill: #94e2d5;
}

.archv-svg-layer .flow-arrow-head-write {
    fill: #f9e2af;
}

/* Async arrow — dashed, light purple, slower animation */
.archv-svg-layer .flow-arrow.flow-arrow-async {
    stroke: #cba6f7;
    stroke-width: 2;
    stroke-dasharray: 8 4;
    opacity: 0.8;
    animation: archvDash 1.2s linear infinite;
}

.archv-svg-layer .flow-arrow-head-async {
    fill: #cba6f7;
    opacity: 0.8;
}

/* Compensate arrow — red dashed, failure/rollback path */
.archv-svg-layer .flow-arrow.flow-arrow-compensate {
    stroke: #f38ba8;
    stroke-width: 2.5;
    stroke-dasharray: 6 4;
    opacity: 0.9;
    animation: archvDash 0.8s linear infinite;
}

.archv-svg-layer .flow-arrow-head-compensate {
    fill: #f38ba8;
}

.archv-svg-layer .dep-arrow-allowed {
    fill: none;
    stroke: #a6e3a1;
    stroke-width: 1.5;
    stroke-dasharray: 4 2;
    opacity: 0.5;
}

.archv-svg-layer .dep-arrow-forbidden {
    fill: none;
    stroke: #f38ba8;
    stroke-width: 1.5;
    stroke-dasharray: 4 2;
    opacity: 0.5;
}

.archv-svg-layer .flow-step-bg {
    fill: var(--archv-accent);
}

.archv-svg-layer .flow-step-bg-response {
    fill: #94e2d5;
}

.archv-svg-layer .flow-step-bg-replay {
    fill: #94e2d5;
}

.archv-svg-layer .flow-step-bg-write {
    fill: #f9e2af;
}

.archv-svg-layer .flow-step-bg-async {
    fill: var(--archv-accent);
    opacity: 0.7;
}

.archv-svg-layer .flow-step-bg-compensate {
    fill: #f38ba8;
}

.archv-svg-layer .flow-step-num {
    fill: #fff;
    font-size: 11px;
    font-weight: 700;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}

@keyframes archvDash {
    to { stroke-dashoffset: -9; }
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
    .arch-nav {
        flex-wrap: wrap;
    }

    .arch-tab {
        flex: 0 0 calc(25% - 3px);
        font-size: 11px;
        padding: 8px 6px;
    }

    .layout-concentric {
        transform: scale(0.65);
        transform-origin: center center;
    }

    .layout-hexagonal {
        flex-direction: column;
    }

    .layout-split {
        grid-template-columns: 1fr;
    }

    .layout-triad {
        flex-direction: column;
        align-items: center;
    }

    .archv-triad-box {
        max-width: 100%;
        width: 100%;
    }

    .layout-context-map {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .layout-context-map .ctx-core,
    .layout-context-map .ctx-right,
    .layout-context-map .ctx-left,
    .layout-context-map .ctx-bottom-left,
    .layout-context-map .ctx-bottom-right {
        grid-column: 1;
        grid-row: auto;
    }

}

@media (max-width: 600px) {
    .arch-tab {
        flex: 0 0 calc(50% - 2px);
        font-size: 11px;
    }

    .layout-concentric {
        transform: scale(0.45);
    }

    .layout-hexagonal {
        flex-direction: column;
        align-items: center;
    }

    .archv-hex-core {
        width: 260px;
        height: 240px;
    }

    .archv-component {
        font-size: 10px;
        padding: 4px 8px;
    }

    .global-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .controls-left, .controls-right {
        justify-content: center;
    }
}