body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ===== Hero MiriCanvas ===== */
.mc-display {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

.mc-hero {
    background-color: #f5f6ff;
    background-image:
        radial-gradient(60% 80% at 100% 0%, rgba(99, 102, 241, 0.14), transparent 70%),
        linear-gradient(rgba(79, 70, 229, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(79, 70, 229, 0.05) 1px, transparent 1px);
    background-size: auto, 28px 28px, 28px 28px;
}

.mc-sheet {
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 28px 60px -24px rgba(49, 46, 129, 0.35);
}

/* kotak-kotak transparan ala editor desain */
.mc-checker {
    background-color: #ffffff;
    background-image:
        linear-gradient(45deg, #eef0f6 25%, transparent 25%, transparent 75%, #eef0f6 75%),
        linear-gradient(45deg, #eef0f6 25%, transparent 25%, transparent 75%, #eef0f6 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
    border: 1px solid #e2e8f0;
}

.mc-select {
    border: 1.5px solid #6366f1;
}

.mc-handle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #ffffff;
    border: 1.5px solid #6366f1;
    border-radius: 2px;
}

.mc-tick {
    flex: none;
    margin-top: 1px;
    width: 18px;
    height: 18px;
    border-radius: 9999px;
    background: #e0e7ff;
    color: #4338ca;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mc-tier {
    font-size: 10px;
    line-height: 1.5;
    font-weight: 600;
    color: #64748b;
    padding-top: 3px;
}

.mc-tier .font-mono {
    display: inline-block;
    margin-right: 6px;
    color: #0f172a;
}

@media (min-width: 640px) {
    .mc-tier { width: 8.75rem; }
}

.mc-kw {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
}

.mc-t1 { background: #eef2ff; color: #4338ca; }
.mc-t2 { background: #ecfdf5; color: #047857; }
.mc-t3 { background: #fffbeb; color: #b45309; }
.mc-t4 { background: #f1f5f9; color: #475569; }

.mc-phrase {
    box-shadow: inset 0 0 0 1px #6366f1;
    font-weight: 600;
}

.mc-key-phrase-dot {
    display: inline-block;
    width: 14px;
    height: 10px;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px #6366f1;
    background: #eef2ff;
}

/* analisis di kartu hasil */
details.mc-analysis > summary {
    cursor: pointer;
    list-style: none;
}
details.mc-analysis > summary::-webkit-details-marker {
    display: none;
}
details.mc-analysis[open] .mc-chevron {
    transform: rotate(180deg);
}