/* =========================
    1. DESIGN TOKENS (VARIABLES)
========================= */

* {transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, border-color 0.2s ease;}

:root {

    /* COLORS */
    --bg:        #f4f3f0;
    --bg2:       #eceae5;
    --surface:   #ffffff;
    --surface2:  #fafaf8;
    --border:    rgba(0,0,0,0.08);
    --border2:   rgba(0,0,0,0.12);

    --indigo:    #4f46e5;
    --indigo2:   #3730a3;
    --violet:    #7c3aed;
    --teal:      #0d9488;
    --amber:     #d97706;
    --red:       #dc2626;
    --green:     #16a34a;

    --ink:       #1a1814;
    --ink2:      #4a4640;
    --ink3:      #9a9690;

    /* TYPOGRAPHY */
    --f-display: 'Syne', sans-serif;
    --f-body:    'Figtree', sans-serif;
    --f-mono:    'IBM Plex Mono', monospace;

    /* RADIUS */
    --r:   10px;
    --r2:  16px;
    --r3:  24px;

    /* SHADOWS */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow:    0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06);

    /* ANIMATION */
    --ease-expo:   cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* =========================
    2. RESET & BASE
========================= */

*, *::before, *::after {box-sizing: border-box; margin: 0; padding: 0;}
body {font-family: var(--f-body); background: var(--bg); color: var(--ink); min-height: 100vh; font-size: 14px; line-height: 1.6; overflow-x: hidden;}
body::before {content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); background-size: 256px; opacity: 0.6;}
body::after {content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 800px 600px at -10% -10%, rgba(79,70,229,0.08) 0%, transparent 60%), radial-gradient(ellipse 600px 500px at 110% 110%, rgba(124,58,237,0.07) 0%, transparent 55%), radial-gradient(ellipse 500px 400px at 110% 0%, rgba(13,148,136,0.06) 0%, transparent 50%);}
    
/* =========================
    3. LAYOUT SYSTEM
========================= */

.page-wrap {position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 0 32px 80px;}
.app-layout {display: grid; grid-template-columns: 280px 1fr; gap: 20px; align-items: start;}
.sidebar {position: sticky; top: 72px; display: flex; flex-direction: column; gap: 14px;}
.main-content {display: flex; flex-direction: column; gap: 20px;}

/* =========================
    4. NAVBAR
========================= */

.navbar {position: sticky; top: 0; z-index: 100; background: rgba(244,243,240,0.75); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(0,0,0,0.06); padding: 0 32px; display: flex; align-items: center; gap: 0; height: 56px;}
.nav-brand {display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; margin-right: 32px; text-decoration: none; white-space: nowrap;}
.nav-brand-icon {width: 28px; height: 28px; background: var(--indigo); border-radius: 7px; display: flex; align-items: center; justify-content: center; color: white; font-size: 13px; flex-shrink: 0; transition: transform 0.35s var(--ease-spring), box-shadow 0.3s;}
.nav-brand:hover .nav-brand-icon {transform: rotate(-14deg) scale(1.12); box-shadow: 0 4px 14px rgba(79,70,229,0.4);}
.nav-tabs {display: flex; align-items: center; gap: 2px; flex: 1;}
.nav-tab {padding: 6px 14px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--ink2); cursor: pointer; transition: all 0.22s var(--ease-expo); border: none; background: none; font-family: var(--f-body); white-space: nowrap;}
.nav-tab:hover {background: rgba(0,0,0,0.05); color: var(--ink);}
.nav-tab.active {background: white; color: var(--indigo); font-weight: 600; box-shadow: var(--shadow-sm);}
.nav-right {display: flex; align-items: center; gap: 8px; margin-left: auto;}
.nav-badge {font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; color: var(--ink3); border: 1px solid var(--border2); padding: 3px 8px; border-radius: 5px; background: var(--surface);}

/* =========================
    5. HERO SECTION
========================= */

.hero {padding: 56px 0 44px; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center;}
.hero-right {display: flex; flex-direction: column; gap: 10px;}
.hero-eyebrow {display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--indigo); background: rgba(79,70,229,0.07); border: 1px solid rgba(79,70,229,0.18); padding: 4px 12px; border-radius: 6px; margin-bottom: 18px;}
.hero h1 {font-family: var(--f-display); font-size: clamp(32px, 5vw, 52px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.0; color: var(--ink); margin-bottom: 14px;}
.hero h1 span {background: linear-gradient(135deg, var(--indigo), var(--violet)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}
.hero-sub {font-size: 15px; color: var(--ink2); max-width: 480px; font-weight: 400; line-height: 1.65; margin-bottom: 24px;}
.hero-tags {display: flex; flex-wrap: wrap; gap: 7px;}
.hero-tag {font-family: var(--f-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.07em; color: var(--ink3); border: 1px solid var(--border2); padding: 4px 11px; border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-sm);}

/* =========================
    6. CARDS & UI COMPONENTS
========================= */

.card {background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85)); border: 1px solid var(--border); border-radius: var(--r2); padding: 22px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: box-shadow 0.2s;}
.card:hover {background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,0.92)); box-shadow: 0 8px 28px rgba(0,0,0,0.08); transform: translateY(-3px) scale(1.01);}
.card-title {font-family: var(--f-display); font-size: 13px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border);}
.card-title-dot {width: 7px; height: 7px; border-radius: 50%; background: var(--indigo); flex-shrink: 0;}

.section-label {font-family: var(--f-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink3); display: flex; align-items: center; gap: 8px; margin-bottom: 12px;}
.section-label::after {content: ''; flex: 1; height: 1px; background: var(--border);}

.stat-card {background: var(--surface); border: 1px solid var(--border); border-radius: var(--r2); padding: 16px 20px; box-shadow: var(--shadow-sm); min-width: 150px;}
.stat-label {font-family: var(--f-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink3); margin-bottom: 4px;}
.stat-value {font-family: var(--f-display); font-size: 24px; font-weight: 700; color: var(--ink); letter-spacing: -0.03em;}

.concept-strip {display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 36px;}
.concept-card {background: var(--surface); border: 1px solid var(--border); border-radius: var(--r2); padding: 20px 18px; box-shadow: var(--shadow-sm); transition: all 0.2s; position: relative; overflow: hidden;}
.concept-card::before {content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--indigo), var(--violet)); opacity: 0; transition: opacity 0.2s;}
.concept-card:hover {box-shadow: var(--shadow);}
.concept-card:hover::before {opacity: 1;}
.concept-num {font-family: var(--f-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; color: var(--indigo); margin-bottom: 12px; opacity: 0.7;}
.concept-icon {font-size: 20px; margin-bottom: 10px; display: block;}
.concept-title {font-family: var(--f-display); font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 5px; letter-spacing: -0.01em;}
.concept-desc {font-size: 12px; color: var(--ink3); line-height: 1.55;}

.formula-pill {display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: 11px; font-weight: 600; color: var(--amber); background: rgba(217,119,6,0.07); border: 1px solid rgba(217,119,6,0.18); padding: 5px 13px; border-radius: 7px; margin-bottom: 14px;}
.check-div {font-size: 11px; color: var(--ink3); line-height: 1.65; margin-bottom: 6px; padding: 8px 12px; background: rgba(0,0,0,0.02); border: 1px solid var(--border); border-radius: var(--r); font-family: var(--f-mono);}

.legend-item {display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink3); font-weight: 500;}
.legend-dot {width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0;}
.legend-green {background: rgba(22,163,74,0.35); border: 1px solid rgba(22,163,74,0.35);}
.legend-red {background: rgba(220,38,38,0.35); border: 1px solid rgba(220,38,38,0.35);}
.legend-same {background: var(--bg2); border: 1px solid var(--border2);}

/* =========================
    7. FORMS & INPUTS
========================= */

.field {display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px;}
.field-label {font-size: 11px; font-weight: 600; letter-spacing: 0.05em; color: var(--ink2); text-transform: uppercase;}
.field-input {width: 100%; padding: 9px 13px; background: var(--bg2); border: 1.5px solid var(--border2); border-radius: var(--r); color: var(--ink); font-family: var(--f-mono); font-size: 16px; font-weight: 700; transition: all 0.15s; outline: none;}
.field-input:focus {border-color: var(--indigo); background: white; box-shadow: 0 0 0 3px rgba(79,70,229,0.10);}

.speed-row {display: flex; align-items: center; gap: 10px; margin-bottom: 14px;}
.speed-label {font-size: 11px; font-weight: 600; color: var(--ink3); letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;}

input[type="range"] {-webkit-appearance: none; flex: 1; height: 3px; background: var(--bg2); border-radius: 2px; outline: none; cursor: pointer; border: none;}
input[type="range"]::-webkit-slider-thumb {-webkit-appearance: none; width: 14px; height: 14px; background: var(--indigo); border-radius: 50%; cursor: pointer; box-shadow: 0 2px 6px rgba(79,70,229,0.35);}

#speedValue {font-family: var(--f-mono); font-size: 11px; font-weight: 700; color: var(--indigo); min-width: 48px; text-align: right;}

#processSelect {width: 100%; padding: 9px 12px; background: var(--bg2); border: 1.5px solid var(--border2); border-radius: var(--r); color: var(--ink); font-family: var(--f-mono); font-size: 14px; font-weight: 700; cursor: pointer; outline: none; transition: border-color 0.15s; margin-bottom: 10px;}
#processSelect:focus {border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(79,70,229,0.10);}
#processSelect option {background: white; color: var(--ink);}

#requestInputs {display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px;}
#requestInputs input {width: 48px; height: 40px; text-align: center; background: var(--bg2); border: 1.5px solid var(--border2); border-radius: var(--r); color: var(--ink); font-family: var(--f-mono); font-size: 14px; font-weight: 700; transition: all 0.15s; outline: none;}
#requestInputs input:focus {border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124,58,237,0.10); background: white;}

/* =========================
    8. BUTTON SYSTEM
========================= */

.btn {display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border: none; border-radius: var(--r); cursor: pointer; font-family: var(--f-body); font-size: 13px; font-weight: 600; transition: transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-expo), background 0.18s, opacity 0.18s; white-space: nowrap; width: 100%; position: relative; overflow: hidden;}
.btn::after {content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0); transition: background 0.18s; pointer-events: none; border-radius: inherit;}
.btn:active::after {background: rgba(255,255,255,0.18);}
.btn:active {transform: scale(0.97) translateY(1px) !important;}
.btn-primary {background: var(--indigo); color: white; box-shadow: 0 2px 8px rgba(79,70,229,0.25), 0 1px 0 rgba(255,255,255,0.12) inset;}
.btn-primary:hover:not(:disabled) {background: var(--indigo2); box-shadow: 0 6px 20px rgba(79,70,229,0.38); transform: translateY(-2px) scale(1.01);}
.btn-run {background: linear-gradient(135deg, var(--indigo), var(--violet)); color: white; padding: 11px 18px; font-size: 13px; font-weight: 700; box-shadow: 0 8px 24px rgba(79,70,229,0.35), 0 1px 0 rgba(255,255,255,0.12) inset;}
.btn-run:hover:not(:disabled) {box-shadow: 0 12px 36px rgba(79,70,229,0.5); transform: translateY(-3px) scale(1.02);}
.btn-secondary {background: var(--surface); color: var(--ink2); border: 1.5px solid var(--border2); box-shadow: var(--shadow-sm);}
.btn-secondary:hover:not(:disabled) {border-color: var(--indigo); color: var(--indigo); background: rgba(79,70,229,0.04);}
.btn-danger {background: var(--red); color: white; box-shadow: 0 2px 8px rgba(220,38,38,0.25);}
.btn-danger:hover:not(:disabled) {box-shadow: 0 4px 16px rgba(220,38,38,0.35); transform: translateY(-1px);}
.btn:disabled {opacity: 0.4; cursor: not-allowed; transform: none !important; box-shadow: none !important;}
.btn + .btn {margin-top: 8px;}

/* =========================
    9. STATUS & STATE UI
========================= */

.status-badge {display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 8px; font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; margin-top: 10px; width: 100%; animation: fadeUp 0.25s ease;}
.status-badge.safe {background: rgba(22,163,74,0.08); border: 1.5px solid rgba(22,163,74,0.25); color: var(--green);}
.status-badge.unsafe {background: rgba(220,38,38,0.08); border: 1.5px solid rgba(220,38,38,0.25); color: var(--red);}
.state-indicator {display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r); font-weight: 600; font-size: 13px; margin-bottom: 10px;}
.state-safe {background: rgba(22,163,74,0.07); border: 1.5px solid rgba(22,163,74,0.20); color: var(--green);}
.state-unsafe {background: rgba(220,38,38,0.07); border: 1.5px solid rgba(220,38,38,0.20); color: var(--red);}
.state-deadlock {background: rgba(217,119,6,0.07); border: 1.5px solid rgba(217,119,6,0.20); color: var(--amber);}
.state-dot {width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; animation: pulse-dot 2s ease infinite;}
.state-safe .state-dot {background: var(--green); box-shadow: 0 0 6px var(--green);}
.state-unsafe .state-dot {background: var(--red); box-shadow: 0 0 6px var(--red);}
.state-deadlock .state-dot {background: var(--amber); box-shadow: 0 0 6px var(--amber);}

.bottom-bar {display: flex; justify-content: flex-end; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);}

#statusBox {margin-top: 8px; padding: 8px 12px; border-radius: var(--r); font-size: 11px; font-weight: 600; font-family: var(--f-mono); display: none; animation: fadeUp 0.22s ease; line-height: 1.5;}
#statusBox.status-success {display: block; background: rgba(22,163,74,0.08); border: 1.5px solid rgba(22,163,74,0.25); color: var(--green);}
#statusBox.status-error {display: block; background: rgba(220,38,38,0.08); border: 1.5px solid rgba(220,38,38,0.25); color: var(--red);}

/* =========================
    10. MATRIX / TABLE UI
========================= */

.matrices-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 14px;}
.matrix-card {background: var(--surface); border: 1px solid var(--border); border-radius: var(--r2); padding: 20px; box-shadow: var(--shadow-sm); transition: all 0.2s;}
.matrix-card:hover {box-shadow: var(--shadow);}
.matrix-header {display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border);}
.matrix-badge {display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; padding: 4px 11px; border-radius: 6px;}
.matrix-desc {font-size: 11px; color: var(--ink3);}
.matrix-auto-tag {font-family: var(--f-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.10em; color: var(--amber); opacity: 0.7;}

.badge-alloc {color: var(--indigo); background: rgba(79,70,229,0.08); border: 1px solid rgba(79,70,229,0.20);}
.badge-max {color: var(--violet); background: rgba(124,58,237,0.08); border: 1px solid rgba(124,58,237,0.20);}
.badge-need {color: var(--amber); background: rgba(217,119,6,0.08); border: 1px solid rgba(217,119,6,0.20);}
.badge-avail {color: var(--teal); background: rgba(13,148,136,0.08); border: 1px solid rgba(13,148,136,0.20);}

.tbl-wrap {overflow-x: auto;}
table {border-collapse: separate; border-spacing: 4px;}
table thead th {font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.07em; color: var(--ink3); padding: 3px 5px; text-align: center;}
.row-lbl {font-family: var(--f-mono); font-size: 10px; font-weight: 600; color: var(--ink3); padding: 0 10px 0 2px; text-align: right; vertical-align: middle; letter-spacing: 0.05em; white-space: nowrap;}
table input {width: 58px; height: 46px; text-align: center; background: var(--bg2); border: 1.5px solid var(--border2); border-radius: var(--r); color: var(--ink); font-family: var(--f-mono); font-size: 15px; font-weight: 700; transition: border-color 0.18s var(--ease-expo), background 0.18s, box-shadow 0.18s, transform 0.2s var(--ease-spring); display: block; outline: none;}
table input:hover {border-color: rgba(79,70,229,0.35); background: white; transform: scale(1.06);}
table input:focus {border-color: var(--indigo); background: white; box-shadow: 0 0 0 3px rgba(79,70,229,0.10); transform: scale(1.08);}
table input:disabled {background: rgba(217,119,6,0.05); color: var(--amber); border-color: rgba(217,119,6,0.20); cursor: default;}
.row-active td input {border-color: var(--green) !important; background: rgba(22,163,74,0.07) !important; color: var(--green) !important; box-shadow: 0 0 0 3px rgba(22,163,74,0.12) !important; animation: cellPulse 0.5s ease;}

/* =========================
    11. SIMULATION OUTPUT
========================= */

.sim-output {background: var(--surface); border: 1px solid var(--border); border-radius: var(--r2); overflow: hidden; box-shadow: var(--shadow-sm);}
.sim-output-header {padding: 16px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; background: var(--surface2);}
.sim-output-title {font-family: var(--f-display); font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em;}
.sim-output-body {padding: 20px;}

.step-card {background: var(--surface2); border: 1px solid var(--border); border-left: 3px solid var(--indigo); border-radius: 0 var(--r) var(--r) 0; padding: 14px 18px; margin-bottom: 8px; animation: slideInLeft 0.32s var(--ease-expo) both; position: relative; transition: border-left-color 0.35s var(--ease-expo), background 0.35s, box-shadow 0.35s, transform 0.35s var(--ease-expo);}
.active-step {border-left-color: var(--green); background: rgba(22,163,74,0.04); box-shadow: -3px 0 0 var(--green), 0 4px 24px rgba(22,163,74,0.14); transform: translateX(3px);}
.step-card-top {display: flex; align-items: center; gap: 10px; margin-bottom: 10px;}
.step-badge {font-family: var(--f-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; color: var(--indigo); background: rgba(79,70,229,0.08); border: 1px solid rgba(79,70,229,0.18); padding: 3px 8px; border-radius: 4px; white-space: nowrap; flex-shrink: 0;}
.step-proc {font-family: var(--f-mono); font-size: 13px; font-weight: 700; color: var(--ink);}
.step-proc b {color: var(--green);}
.step-explanation {font-size: 12px; color: var(--ink2); line-height: 1.7; margin-bottom: 10px; padding: 10px 12px; background: var(--bg2); border-radius: var(--r); border: 1px solid var(--border);}
.step-work-row {display: flex; align-items: center; gap: 8px; flex-wrap: wrap;}
.step-work-label {font-family: var(--f-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.10em; color: var(--ink3); text-transform: uppercase;}
.step-work-chips {display: flex; gap: 4px; flex-wrap: wrap;}
.step-work-chip {padding: 4px 10px; background: rgba(79,70,229,0.07); border: 1px solid rgba(79,70,229,0.16); border-radius: 5px; font-family: var(--f-mono); font-size: 11px; font-weight: 700; color: var(--indigo); animation: chipPop 0.45s var(--ease-spring) both; transition: transform 0.2s var(--ease-spring), box-shadow 0.2s;}
.step-work-chip:hover {transform: translateY(-2px) scale(1.07); box-shadow: 0 4px 10px rgba(79,70,229,0.18);}

.result-box {border-radius: var(--r2); padding: 28px; text-align: center; margin-top: 12px; animation: fadeUp 0.4s ease; position: relative; overflow: hidden;}
.result-safe {background: linear-gradient(135deg, rgba(22,163,74,0.07), rgba(22,163,74,0.03)); border: 1.5px solid rgba(22,163,74,0.25); box-shadow: 0 4px 24px rgba(22,163,74,0.10);}
.result-unsafe {background: linear-gradient(135deg, rgba(220,38,38,0.07), rgba(220,38,38,0.03)); border: 1.5px solid rgba(220,38,38,0.25); box-shadow: 0 4px 24px rgba(220,38,38,0.08);}
.result-rlabel {font-family: var(--f-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 6px; opacity: 0.7;}
.result-safe .result-rlabel {color: var(--green);}
.result-unsafe .result-rlabel {color: var(--red);}
.result-title {font-family: var(--f-display); font-size: 26px; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 16px;}
.result-safe .result-title {color: var(--green);}
.result-unsafe .result-title {color: var(--red);}
.result-sub {font-size: 12.5px; color: var(--ink2); max-width: 480px; margin: 0 auto;}

/* =========================
    12. SEQUENCES & DEADLOCK
========================= */

.safe-seq {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px;}
.seq-chip {padding: 7px 15px; border-radius: 8px; background: rgba(22,163,74,0.10); border: 1.5px solid rgba(22,163,74,0.28); color: var(--green); font-family: var(--f-mono); font-weight: 700; font-size: 13px; box-shadow: var(--shadow-sm); transition: transform 0.22s var(--ease-spring), box-shadow 0.22s; animation: chipPop 0.5s var(--ease-spring) both; cursor: default;}
.seq-chip:hover {transform: translateY(-3px) scale(1.08); box-shadow: 0 6px 16px rgba(22,163,74,0.28);}
.seq-arr {color: var(--ink3); font-size: 16px; font-weight: 300;}

.deadlock-detail {margin-top: 16px; text-align: left; background: rgba(220,38,38,0.05); border: 1px solid rgba(220,38,38,0.15); border-radius: var(--r); padding: 14px 16px;}
.deadlock-detail-title {font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.10em; color: var(--red); margin-bottom: 8px; text-transform: uppercase;}
.deadlock-reason {font-size: 11.5px; color: var(--red); line-height: 1.7; padding: 5px 0; border-bottom: 1px solid rgba(220,38,38,0.12); font-family: var(--f-mono);}
.deadlock-reason:last-child {border-bottom: none;}

/* =========================
    13. DIFF / COMPARISON UI
========================= */

.diff-panel {background: var(--surface); border: 1px solid var(--border); border-radius: var(--r2); padding: 20px; box-shadow: var(--shadow-sm); animation: fadeUp 0.3s ease;}
.diff-header {display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px;}
.diff-legend {display: flex; gap: 12px; align-items: center;}
.diff-matrices {display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;}
.diff-matrix-card {background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r); padding: 12px; transition: border-color 0.2s;}
.diff-matrix-card.has-changes {border-color: rgba(79,70,229,0.20); box-shadow: 0 2px 12px rgba(79,70,229,0.06);}
.diff-matrix-title {font-family: var(--f-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--indigo); margin-bottom: 10px;}
.diff-table {border-collapse: separate; border-spacing: 3px; width: 100%; }
.diff-table th {font-family: var(--f-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.07em; color: var(--ink3); padding: 2px 3px; text-align: center;}
.diff-row-lbl {font-family: var(--f-mono); font-size: 9px; font-weight: 600; color: var(--ink3); padding: 0 7px 0 2px; text-align: right; white-space: nowrap;}
.diff-cell {text-align: center; }
.diff-val {display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 40px; height: 34px; border-radius: var(--r); font-family: var(--f-mono); font-weight: 700; background: var(--bg2); border: 1px solid var(--border); transition: all 0.2s;}
.diff-val.changed-up {background: rgba(22,163,74,0.08); border-color: rgba(22,163,74,0.25); color: var(--green); animation: cellPulse 0.4s ease;}
.diff-val.changed-down {background: rgba(220,38,38,0.08); border-color: rgba(220,38,38,0.25); color: var(--red); animation: cellPulse 0.4s ease;}
.diff-val .old-val {font-size: 8px; font-weight: 400; opacity: 0.5; text-decoration: line-through; line-height: 1;}
.diff-val .new-val {font-size: 13px; font-weight: 700; line-height: 1;}
.diff-val.unchanged .new-val {font-size: 12px; color: var(--ink3);}
.diff-process-tag {display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 11px; font-weight: 600; color: var(--indigo); background: rgba(79,70,229,0.07); border: 1px solid rgba(79,70,229,0.18); padding: 5px 12px; border-radius: 6px; margin-bottom: 14px; letter-spacing: 0.05em;}

/* =========================
    14. AVAILABLE / NEED UI
========================= */

.avail-diff-row {display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);}
.avail-diff-chip {display: flex; flex-direction: column; align-items: center; gap: 4px;}
.avail-diff-label {font-family: var(--f-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.06em; color: var(--ink3);}
.avail-diff-val {min-width: 48px; height: 34px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--r); font-family: var(--f-mono); font-weight: 700; background: var(--bg2); border: 1px solid var(--border);}
.avail-diff-val.changed-up {background: rgba(22,163,74,0.08); border-color: rgba(22,163,74,0.25); color: var(--green); animation: cellPulse 0.4s ease;}
.avail-diff-val.changed-down {background: rgba(220,38,38,0.08); border-color: rgba(220,38,38,0.25); color: var(--red); animation: cellPulse 0.4s ease;}
.avail-diff-val .old-val {font-size: 8px; opacity: 0.5; text-decoration: line-through; line-height: 1;}
.avail-diff-val .new-val {font-size: 12px; line-height: 1;}
.avail-diff-val.unchanged .new-val {color: var(--ink3);}
.avail-card {background: var(--surface); border: 1px solid rgba(13,148,136,0.20); border-radius: var(--r2); padding: 20px; box-shadow: var(--shadow-sm);}
.avail-inputs {display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px;}
.avail-group {display: flex; flex-direction: column; align-items: center; gap: 5px;}
.avail-rlabel {font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.07em; color: var(--ink3);}
.avail-input {width: 52px; height: 42px; text-align: center; background: rgba(13,148,136,0.05); border: 1.5px solid rgba(13,148,136,0.25); border-radius: var(--r); color: var(--teal); font-family: var(--f-mono); font-size: 16px; font-weight: 700; transition: all 0.15s; outline: none;}
.avail-input:focus {border-color: var(--teal); background: white; box-shadow: 0 0 0 3px rgba(13,148,136,0.12);}

.need-card {background: var(--surface); border: 1px solid rgba(217,119,6,0.20); border-radius: var(--r2); padding: 20px; box-shadow: var(--shadow-sm); position: relative;}
.req-label {font-size: 11px; font-weight: 600; color: var(--ink3); letter-spacing: 0.05em; text-transform: uppercase; display: block; margin-bottom: 6px;}

/* =========================
    15. VISUALIZATION (RAG)
========================= */

.rag-container {background: var(--surface); border: 1px solid var(--border); border-radius: var(--r2); padding: 20px; box-shadow: var(--shadow-sm);}
.rag-header {display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 10px;}
.rag-legend {display: flex; gap: 14px; align-items: center;}
.rag-legend-item {display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; color: var(--ink3);}
.rag-legend-line {width: 20px; height: 2px; border-radius: 1px;}
#ragCanvas {width: 100%; height: auto; border-radius: var(--r); background: transparent; display: block;}

/* =========================
    16. ANIMATIONS
========================= */

@keyframes fadeUp {from {opacity: 0; transform: translateY(12px);} to {opacity: 1; transform: translateY(0);}}
@keyframes slideInLeft {from {opacity: 0; transform: translateX(-14px);} to {opacity: 1; transform: translateX(0);}}
@keyframes chipPop {0% {opacity: 0; transform: scale(0.65) translateY(5px);} 60% {transform: scale(1.08) translateY(-2px);} 100% {opacity: 1; transform: scale(1) translateY(0);}}
@keyframes cellPulse {0% {transform: scale(1);} 40% {transform: scale(1.08);} 100% {transform: scale(1);}}

.pulse-dot {width: 6px; height: 6px; border-radius: 50%; background: var(--indigo); animation: pulse-dot 2s ease infinite;}
@keyframes pulse-dot {0%, 100% {opacity: 1; transform: scale(1);} 50% {opacity: 0.4; transform: scale(0.6);}}

/* =========================
    17. RESPONSIVE 
========================= */

.hamburger {display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 36px; height: 36px; background: var(--surface); border: 1px solid var(--border2); border-radius: var(--r); cursor: pointer; flex-shrink: 0; margin-right: 10px; box-shadow: var(--shadow-sm); -webkit-tap-highlight-color: transparent; transition: background 0.2s, box-shadow 0.2s;}
.hamburger:hover {background: var(--bg2); box-shadow: var(--shadow);}
.hamburger span {display: block; width: 16px; height: 2px; background: var(--ink2); border-radius: 2px; transition: transform 0.3s var(--ease-expo), opacity 0.2s;}
.hamburger.open span:nth-child(1) {transform: translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2) {opacity: 0; transform: scaleX(0);}
.hamburger.open span:nth-child(3) {transform: translateY(-7px) rotate(-45deg);}

.sidebar-overlay {display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 200; opacity: 0; transition: opacity 0.3s var(--ease-expo);}
.sidebar-overlay.active {display: block; opacity: 1;}
.sidebar-close-row {display: none; padding: 0 0 12px 0; border-bottom: 1px solid var(--border); margin-bottom: 4px;}
.sidebar-close-btn {background: none; border: 1px solid var(--border2); border-radius: var(--r); padding: 6px 14px; font-family: var(--f-mono); font-size: 11px; font-weight: 700; color: var(--ink3); cursor: pointer; letter-spacing: 0.05em; -webkit-tap-highlight-color: transparent; transition: background 0.18s, color 0.18s;}
.sidebar-close-btn:hover {background: var(--bg2); color: var(--ink);}

/* ===== MOBILE (< 640px) ===== */
@media (max-width: 640px) {
  .hamburger {display: flex;}
  .nav-tabs {display: none;}
  .nav-brand {font-size: 13px; margin-right: 0;}
  .navbar {padding: 0 14px; gap: 0;}
  .nav-right {gap: 5px;}
  .nav-badge {font-size: 9px; padding: 2px 6px;}
  .page-wrap {padding: 0 14px 60px;}
  .hero {grid-template-columns: 1fr; padding: 32px 0 28px; gap: 24px;}
  .hero h1 {font-size: clamp(28px, 8vw, 40px);}
  .hero-sub {font-size: 13px;}
  .hero-right {flex-direction: row; flex-wrap: wrap; gap: 8px;}
  .stat-card {min-width: 0; flex: 1 1 120px; padding: 12px 14px;}
  .stat-value {font-size: 13px !important;}
  .concept-strip {grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 24px;}
  .concept-card {padding: 14px 12px;}
  .concept-title {font-size: 12px;}
  .concept-desc {font-size: 11px;}
  .app-layout {display: block;}
  .sidebar {position: fixed; top: 0; left: 0; height: 100vh; width: min(300px, 88vw); background: var(--bg); z-index: 210; padding: 56px 16px 32px; overflow-y: auto; transform: translateX(-110%); transition: transform 0.35s var(--ease-expo); box-shadow: var(--shadow-lg); gap: 12px;}
  .sidebar.open {transform: translateX(0);}
  .sidebar-close-row {display: flex;}
  .matrices-grid {grid-template-columns: 1fr; gap: 12px;}
  .diff-matrices {grid-template-columns: 1fr;}
  .tbl-wrap {overflow-x: auto; -webkit-overflow-scrolling: touch;}
  table input {width: 46px; height: 38px; font-size: 13px;}
  .btn {font-size: 12px; padding: 10px 14px;}
  .btn-run {font-size: 13px; padding: 12px 14px;}
  #ragCanvas {height: 300px;}
  .avail-inputs {gap: 8px;}
  .avail-input {width: 44px; height: 38px; font-size: 14px;}
  .result-title {font-size: 20px;}
  .result-sub {font-size: 12px;}
  button, input, select { -webkit-tap-highlight-color: transparent;}}

/* ===== TABLET (641px – 1023px) ===== */
@media (min-width: 641px) and (max-width: 1023px) {
  .hamburger {display: flex;}
  .nav-tabs {display: none;}
  .navbar {padding: 0 20px;}
  .page-wrap {padding: 0 20px 60px;}
  .hero {grid-template-columns: 1fr; padding: 40px 0 32px; gap: 28px;}
  .hero h1 {font-size: clamp(30px, 5vw, 44px);}
  .hero-right {flex-direction: row; flex-wrap: wrap; gap: 10px;}
  .stat-card {min-width: 0; flex: 1 1 140px;}
  .concept-strip {grid-template-columns: repeat(2, 1fr); gap: 10px;}
  .app-layout {display: block;}
  .sidebar {position: fixed; top: 0; left: 0; height: 100vh; width: 300px; background: var(--bg); z-index: 210; padding: 64px 20px 40px; overflow-y: auto; transform: translateX(-110%); transition: transform 0.35s var(--ease-expo); box-shadow: var(--shadow-lg); gap: 14px;}
  .sidebar.open {transform: translateX(0);}
  .sidebar-close-row {display: flex;}
  .matrices-grid {grid-template-columns: 1fr 1fr; gap: 14px;}
  .tbl-wrap {overflow-x: auto; -webkit-overflow-scrolling: touch;}
  table input {width: 52px; height: 42px;}}

/* ===== DESKTOP (1024px+) ===== */
@media (min-width: 1024px) {
  .app-layout {display: grid; grid-template-columns: 280px 1fr; gap: 20px; align-items: start;}
  .sidebar {position: sticky; top: 72px; display: flex; flex-direction: column; gap: 14px; transform: none !important; box-shadow: none; background: transparent; height: auto; width: auto; padding: 0; overflow-y: visible;}
  .sidebar-close-row {display: none;}
  .hamburger {display: none;}
  .nav-tabs {display: flex;}
  .sidebar-overlay {display: none !important;}}

/* =========================
    18. UTILITIES
========================= */

.hl-green { color: var(--green); font-weight: 600; font-family: var(--f-mono); font-size: 11px; }
.hl-red { color: var(--red); font-weight: 600; font-family: var(--f-mono); font-size: 11px; }
.hl-white { color: var(--ink); font-weight: 600; font-family: var(--f-mono); font-size: 11px; }

[data-tip] {position: relative; cursor: help;}
[data-tip]::after {content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--ink); color: white; font-family: var(--f-body); font-size: 11px; font-weight: 400; padding: 6px 10px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 50; max-width: 220px; white-space: normal; text-align: center;}
[data-tip]:hover::after {opacity: 1;}

::-webkit-scrollbar {width: 5px; height: 5px;}
::-webkit-scrollbar-track {background: var(--bg);}
::-webkit-scrollbar-thumb {background: rgba(0,0,0,0.15); border-radius: 3px;}
::-webkit-scrollbar-thumb:hover {background: rgba(79,70,229,0.35);}

.mdot {display: none;}
#workPanel {display: none;}
#workValues {display: none;}