body {
    font-family: 'Inter', sans-serif;
    background-color: #111827;
    /* bg-gray-900 */
}

.font-fira {
    font-family: 'Fira Code', monospace;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.result-card {
    background-color: #1f2937;
    /* bg-gray-800 */
    border: 1px solid #374151;
    /* border-gray-700 */
    border-radius: 0.75rem;
    /* rounded-xl */
    padding: 1.5rem;
    /* p-6 */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.result-card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Styles for the visual Huffman Tree */
.tree-container {
    display: inline-flex;
    /* Use inline-flex to allow centering and natural width */
    flex-direction: column;
    align-items: center;
}

.tree-node {
    background-color: #374151;
    /* bg-gray-700 */
    color: #d1d5db;
    /* text-gray-300 */
    border: 2px solid #2563eb;
    /* border-blue-600 */
    border-radius: 9999px;
    /* rounded-full */
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 0.875rem;
    font-weight: 500;
}

.tree-node .char {
    font-weight: 700;
    color: #60a5fa;
    /* text-blue-400 */
}

.tree-node .freq {
    position: absolute;
    bottom: -1.2rem;
    font-size: 0.75rem;
    color: #9ca3af;
    /* text-gray-400 */
}

/* --- New Zoomable SVG Tree Styles --- */
.tree-svg-wrapper {
    position: relative;
    width: 100%;
    height: 500px;
    background: radial-gradient(circle at 50% 50%, #1e293b 0%, #111827 70%);
    border: 1px solid #374151;
    border-radius: 0.75rem;
    overflow: hidden;
    cursor: grab;
}

.tree-svg-wrapper:active {
    cursor: grabbing;
}

.tree-svg-wrapper svg {
    width: 100%;
    height: 100%;
    font-family: 'Fira Code', monospace;
}

.tree-edge {
    stroke: #475569;
    stroke-width: 2;
    fill: none;
}

.tree-edge-label {
    font-size: 10px;
    fill: #9ca3af;
    -webkit-user-select: none;
    user-select: none;
}

.tree-node-circle {
    fill: #1f2937;
    stroke: #2563eb;
    stroke-width: 2;
}

.tree-node-leaf {
    fill: #0f172a;
    stroke: #16a34a;
}

.tree-node-text {
    font-size: 12px;
    fill: #bfdbfe;
    pointer-events: none;
    font-weight: 600;
}

.tree-node-freq {
    font-size: 10px;
    fill: #9ca3af;
    pointer-events: none;
}

.tree-ctl-btn {
    background: #1f2937;
    color: #e5e7eb;
    padding: 0.4rem 0.75rem;
    font-size: 0.75rem;
    line-height: 1;
    border: 1px solid #374151;
    border-radius: 0.5rem;
    transition: background .2s, transform .15s;
}

.tree-ctl-btn:hover {
    background: #2563eb;
    color: white;
}

.tree-ctl-btn:active {
    transform: scale(.95);
}

.tree-node-highlight {
    filter: drop-shadow(0 0 4px #2563eb);
}

/* Responsive height scaling */
@media (max-width: 640px) {
    .tree-svg-wrapper {
        height: 380px;
    }
}

.tree-children {
    display: flex;
    position: relative;
    margin-top: 2.5rem;
    /* mt-10 */
}

.tree-branch {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1rem;
    /* px-4 */
    position: relative;
}

/* Drawing lines */
.tree-branch::before {
    content: '';
    position: absolute;
    top: -1.5rem;
    height: 1.5rem;
    /* h-6 */
    width: 2px;
    background-color: #4b5563;
    /* bg-gray-600 */
}

.tree-children::before {
    content: '';
    position: absolute;
    top: -1.5rem;
    left: 50%;
    right: 50%;
    height: 2px;
    background-color: #4b5563;
}

.tree-children .tree-branch:first-child:last-child::before {
    /* if single child dont draw line */
    background-color: transparent;
}

.tree-children .tree-branch:first-child::before {
    left: 50%;
}

.tree-children .tree-branch:last-child::before {
    right: 50%;
}

.tree-children .tree-branch:first-child:not(:last-child)::after {
    content: '';
    position: absolute;
    top: -1.5rem;
    left: 50%;
    right: -1rem;
    /* -px-4 */
    height: 2px;
    background-color: #4b5563;
}

.tree-children .tree-branch:last-child:not(:first-child)::after {
    content: '';
    position: absolute;
    top: -1.5rem;
    right: 50%;
    left: -1rem;
    /* -px-4 */
    height: 2px;
    background-color: #4b5563;
}